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

Question

我有一个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";
}

Answer 1

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

像这样

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

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2015-02-05 21:03:34

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2015-02-05 21:03:34

解决方案1
1 已采纳 2015-02-05 21:03:34