引用另一个页面并更改iframe内容

我想使用我的主页来引用另一个页面，并使用JavaScript更改该页面及其标题的iframe中的内容。当我已经在页面中时，我可以更改内容，但是当我从主页引用时，它不会更改iframe的内容。引用另一个页面并更改iframe内容

EntryForm.html是“主表单页面”，当用户从主页单击按钮时，需要能够更改iframe和标题的内容。任何帮助表示赞赏。

首页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"></script> 
     <script type="text/javascript" src="lib/d3.js"></script> 
     <script type="text/javascript" src="Scripts/gauge.js"></script> 
     <link rel="stylesheet" type="text/css" href="Styles/Design.css"> 
    </head> 
    <body onload="initialize()"> 
     <div id="body"><br></div> 
     <div id="header"> 
     <h1>Carrolton Plant</h1>  
     <div id="headerIcon"></div> 
     <div id="tv1clock"></div> 
     </div>  
     <div id="content"> </div> 
     <span id="oeeLine1GaugeContainer"></span> 
     <span id="oeeLine2GaugeContainer"></span> 
     <span id="oeePlantGaugeContainer"></span> 
     <span id="testGaugeContainer"></span> 
     <div id="footer">&nbsp; 
     <input title="Home Page" type="homebutton"></input> 
     <input title="Previous Page" type="previousbutton" onclick="PreviousPage()"></input> 
     <a href ="EntryForm.html"onclick="WastePage()"> <input title="Waste Entry Page" type="wastebutton" onclick="WastePage()"></input></a> 
     <a href ="EntryForm.html" onclick="MetricsPage()"> <input title="Metrics Initializer" type="gearbutton" onclick="MetricsPage()"></input></a> 
     <a href="HeatMap.html"><input title="Heat Map" type="heatbutton"></input></a> 
     <a href ="EntryForm.html" onclick="SafetyEntryPage()"> <input title="Safety Entry" type="safetybutton" onclick="SafetyEntryPage()"></input></a> 
     <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>

报名表

<!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 id="headerIcon"></div> 
     <div id="tv1clock"></div> 
     </div> 
     <center> 
     <div id="wrapper">   
      <div id="iFrameHeight"> 
       <iframe name="iframe" src="MetricsEntryForm.html" scrolling="auto" id="GlobalFrame"></iframe> 
      </div>   
     </div> 
     </center> 
     <div id="footer">&nbsp; 
     <a href="HomePage.html"><input title="Home Page" type="homebutton"></input></a> 
     <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> 
     <a href="HeatMap.html"><input title="Heat Map" type="heatbutton"></input></a> 
     <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 WastePage() { 
    document.getElementById("h1").innerHTML = "Waste Entry Form"; 
    document.getElementById("GlobalFrame").src = "WasteEntryForm.html"; 
} 
function SafetyEntryPage() { 
    document.getElementById("h1").innerHTML = "Safety Entry Form"; 
    document.getElementById("GlobalFrame").src = "SafetyEntryForm.html"; 
} 
function MetricsPage() { 
    document.getElementById("h1").innerHTML = "Metrics Entry Form"; 
    document.getElementById("GlobalFrame").src = "MetricsEntryForm.html"; 
}

来源

2015-02-11 ENGR024

移动iframe来主页和完全删除Entry.html页面。考虑到你正在尝试做什么，该页面似乎毫无价值。然后从“废物”，“度量标准”和“安全”链接中移除锚点标记。以下是更新的Home.html：

<div id="body"><br></div> 
    <div id="header"> 
    <h1>Carrolton Plant</h1>  
    <div id="headerIcon"></div> 
    <div id="tv1clock"></div> 
    </div>  
    <div id="content"> 
    <center> 
     <div id="wrapper">   
     <div id="iFrameHeight"> 
      <iframe name="iframe" src="MetricsEntryForm.html" scrolling="auto" id="GlobalFrame"></iframe> 
     </div>   
     </div> 
    </center> 
    </div> 
    <span id="oeeLine1GaugeContainer"></span> 
    <span id="oeeLine2GaugeContainer"></span> 
    <span id="oeePlantGaugeContainer"></span> 
    <span id="testGaugeContainer"></span> 

    <div id="footer">&nbsp; 
    <input title="Home Page" type="homebutton"></input> 
    <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> 
    <a href="HeatMap.html"><input title="Heat Map" type="heatbutton"></input></a> 
    <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>

而且这个功能添加到您的JavaScript文件

function HomePage() { 
    document.getElementById("h1").innerHTML = "Carrolton Plant"; 
    document.getElementById("GlobalFrame").src = "MetricsEntryForm.html"; 
}

这就是我会闲着。

来源

2015-02-11 18:44:46 Heath

感谢您的回复。我明白你的意思，但在主页上，我不希望页面上有iframe。将会有一个覆盖整个页面的大图。那么iframe如何动态消失？ – ENGR024 2015-02-11 19:32:35

引用另一个页面并更改iframe内容

回答

相关问题