当Iframe内容从按钮更改时，动态更改标头名称

Dynamically change header names when Iframe content changes from a button

本文关键字：动态 按钮 Iframe      更新时间：2023-09-26

我有一个html主页模板。该页面由页眉、正文和页脚组成。在身体里，有一个Iframe。页脚有图片按钮图标，可以在iframe中加载不同的html表单页面。当我点击另一个图标时，iframe内容会更改为该页面。

我的问题是，当我点击图标时，如何更改标题？

母版页有一个标题，叫做"度量输入表单"。当我点击页脚的图标时，页眉应该会动态更改（例如，安全输入表、废物输入表等）。

这可以用CSS完成吗？或者需要Javascript或PHP。感谢

我的代码粘贴在下面。任何帮助都将不胜感激。

html:

<!DOCTYPE html>
<html>
   <head>
      <meta charset="UTF-8" content="HTML,CSS,XML,JavaScript">
      <script src="Scripts/jquery.js" type="text/javascript"></script>
      <script src="Scripts/Global.js" type="text/javascript"></script>
      <script type="text/javascript" src="Scripts/modernizr.custom.86080.js"></script>
      <link rel="stylesheet" type="text/css" href="Styles/Design.css">
   </head>
   <body>
      <div id="header">
         <h1 id="h1">Metrics Entry Form</h1>
      </div>
      <div id="iFrameHeight">
         <iframe name="iframe" src="MetricsEntryForm.html" scrolling="auto" id="GlobalFrame"></iframe>
      </div>
      <div id="footer">&nbsp;        
         <input title="Previous Page" type="previousbutton" onclick="PreviousPage()"></input>
         <input title="Waste Entry Page" type="wastebutton" onclick="WastePage()"></input>
         <input title="Metrics Initializer" type="gearbutton" onclick="MetricsPage()"></input>
         <input title="Safety Entry" type="safetybutton" onclick="SafetyEntryPage()"></input>
         <input title="Trending" type="trendbutton" onclick="Trending()"></input>
         <input title="Alarm and Events" type="alarmbutton" onclick="Alarm()"></input>
         <input title="Report Expert" type="expertbutton" onclick="ReportExpert()"></input>
         <input title="Data Entry Reports" type="ssrsbutton" onclick="DataEntrSSRS()"></input>   
      </div>
   </body>
</html>

JavaScript:

function PreviousPage() {
    window.history.back()
}
function WastePage() {
    document.getElementById("h1").innerHTML = "Waste Page";
    document.getElementById("GlobalFrame").src = "WasteEntryForm.html";
}
function SafetyEntryPage() {
    document.getElementById("h1").innerHTML = "Safety Page";
    document.getElementById("GlobalFrame").src = "SafetyEntryForm.html";
}
function MetricsPage() {
    document.getElementById("GlobalFrame").src = "MetricsEntryForm.html";
}

在每个函数中，在更改iframe的src属性之前，只需在#header 中设置h1的文本

像这个

document.getElementById("p1").innerHTML = "New text!";
相关文章：