當Iframe內容從按鈕更改時動態更改標題名稱

我有一個html主頁面模板。該頁面由標題，正文和頁腳組成。在身體中，有一個Iframe。頁腳有圖片按鈕圖標，可以在iframe中加載不同的html表單頁面。當我點擊不同的圖標時，iframe內容會變爲該頁面。當Iframe內容從按鈕更改時動態更改標題名稱

我的問題是，當我點擊圖標時如何更改標題標題？

主頁面上有一個名爲「Metrics Entry Form」的標題。當我點擊頁腳上的圖標時，標題應該動態變化（例如安全輸入表格，廢物輸入表格等）。

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

來源

2015-02-05 ENGR024

在每一個功能，您可以更改iframe的src屬性之前剛剛成立的H1的文字你的#header

裏面象這

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

來源

2015-02-05 21:03:34 Jordan

像這樣？函數SafetyEntryPage（）{document.getElementById（「p1」）。innerHTML =「New text！」; document.getElementById（「GlobalFrame」）。src =「SafetyEntryForm.html」; } – ENGR024 2015-02-05 21:22:40

我試過這個，但它沒有src頁面，也沒有改變標頭 – ENGR024 2015-02-05 21:23:24

是的，然後只需將id更改爲您的標題id，然後將文本更改爲您想要的內容。 – Jordan 2015-02-05 21:23:48

當Iframe內容從按鈕更改時動態更改標題名稱

回答

相關問題