当 Iframe 内容从按钮更改时动态更改 header 名称

Question

我有一个 html 母版页模板。该页面由 header、body 和页脚组成。在body中，有一个iframe。页脚有图片按钮图标，可在 iframe 中加载不同的 html 表单页面。当我单击不同的图标时，iframe 内容更改为该页面。

我的问题是，如何在单击图标时更改 header 标题？

主页有一个名为 "Metrics Entry Form" 的 header。当我单击页脚处的图标时，header 应该会动态变化（例如，安全条目表、废物条目表等）。

可以用 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";
}

Answer 1

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

中设置 h1 的文本

像这样

document.getElementById("p1").innerHTML = "New text!";

当 Iframe 内容从按钮更改时动态更改 header 名称

Dynamically change header names when Iframe content changes from a button

javascript

jquery

html

css

iframe