如何將兩個單獨的頁面加載到兩個單獨的iframe？

我有一個帶有兩個iframe的網頁：iframe.main和iframe.secondary。我想知道iframe.main中的頁面被加載後，是否有方法將特定的頁面加載到iframe.secondary？我會盡力來說明我想達到的目標：如何將兩個單獨的頁面加載到兩個單獨的iframe？

<body> 

<iframe id="main" src=""> 

</iframe> 

<iframe id="secondary" src=""> 

</iframe> 

<button onClick="main.location.href='mainpage.html'"> 
    Load mainpage.html to iframe.main and secondary.html to iframe.secondary 
</button> 

</body>

那麼，如何加載secondary.html到iframe.secondary爲mainpage.html負載iframe.main？我可以使用按鈕的onClick事件或mainpage.html的onLoad事件嗎？

來源

2013-06-03 user2447547

在點擊按鈕時更改/設置兩個iframe的src屬性。這裏有一個例子可以讓你的HTML精簡：

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Two iframes</title> 
<script type='text/javascript'> 
window.onload = function(){ 
    // Get the button that will trigger the action 
    var b = document.getElementById('trigger'); 
    // and set the onclick handler here instead of in HTML 
    b.onclick = doLoads; 

    // The callback function for the onclick handler above 
    function doLoads() { 
     // Get the two iframes 
     var m = document.getElementById('main'); 
     var s = document.getElementById('secondary'); 
     // and set the source URLs 
     m.src = "mainpage.html"; 
     s.src = "secondary.html"; 
    } 

    // You could also move doLoads() code into an anonymous function like this: 
    //  b.onclick = function() { var m = ... etc. } 
} 
</script> 
</head> 
<body> 
<iframe id="main" src=""></iframe> 
<iframe id="secondary" src=""></iframe> 
<br> 
<button id="trigger">Load both pages</button> 
</body> 
</html>

來源

2013-06-03 12:18:25 kkoala

非常感謝！接下來我正在考慮以下內容：假設iframe.secondary會有一些默認頁面，我們將其稱爲default.html。如何將iframe.secondary中加載的頁面更改爲default.html，因爲我離開了iframe.main中的頁面？ – user2447547

不確定你的意思是「將頁面留在iframe.main」中。您可以將輔助iframe的初始'src'設置爲「default.html」，並在加載「secondary.html」後添加另一個按鈕以將其重新設置爲「default.html」。對於更復雜的交互，我建議你看看jQuery或其他框架，因爲普通的JavaScript往往會變得笨拙。 – kkoala

另一個問題（對不起）：如何將body onload事件設置爲main.html，觸發iframe.seconday中的secondary.html的加載？我試圖找出如何去做，但沒有成功...... – user2447547

如何將兩個單獨的頁面加載到兩個單獨的iframe？

回答

相關問題