Iframe和後退按鈕

考慮下面的HTML：（書面谷歌瀏覽器）Iframe和後退按鈕

<html> 
    <head> 
    <script language="javascript"> 
     function AddToIFrame(){ 
     var Frame=document.getElementById("BackTest").contentWindow.document; 
     Frame.open(); 
     Frame.write(Math.random()); 
     Frame.close(); 
     } 
    </script> 
    </head> 
    <body> 
    <iframe id="BackTest" name="BackTest" width="100%" height="222"></iframe> 
    <a href="javascript:AddToIFrame();">Add To IFrame</a> 
    <p>How Can I Modify This HTML So That After Clicking The Link Above, I Can Use The Back Button To Go To Previous IFrame Content?</p> 
    </body> 
</html>

每次點擊的鏈接，iframe的內容將發生變化。這很好用 - 並且爲了我的目的，必須使用document.write來更改iframe內容。

我的問題是，我希望後退按鈕可以循環回iframe的前一內容 - 就像它在許多其他頁面上一樣。在這個例子中發生了什麼，但後退按鈕會帶我到前一個主頁面。

我該如何做到這一點，以便返回按鈕將導致iframe恢復，直到iframe超出歷史記錄，然後只從主頁面返回？

來源

2010-12-19 Joshua

爲什麼「必須使用document.write」?? – ephemient 2010-12-19 21:43:35

因爲沒有URL代表我想渲染的HTML - 我從JavaScript動態生成HTML – Joshua 2010-12-19 23:22:50

有很多DOM操作技術比原始的'document.write'好得多。除此之外，他們將允許您複製和保存並移動和刪除節點。 – ephemient 2010-12-20 02:03:13

易於使用一些新的HTML5功能。

<html> 
    <head> 
    <script> 
     var inner; 
     window.addEventListener('load', function() { 
     inner = document.getElementById('inner').contentWindow; 
     inner.document.open(); 
     inner.document.write(
      "\x3cscript\x3e" + 
      "var contents = document.getElementById('contents');" + 
      "window.addEventListener('load', function() {" + 
       "contents = document.getElementById('contents');" + 
      "}, false);" + 
      "window.addEventListener('message', function(e) {" + 
       "history.pushState(e.data, '', '');" + 
       "contents.value = e.data;" + 
      "}, false);" + 
      "window.addEventListener('popstate', function(e) {" + 
       "contents.value = e.state;" + 
      "}, false);" + 
      "\x3c/script\x3e" + 
      '\x3ctextarea id="contents" readonly\x3e\x3c/textarea\x3e' 
     ); 
     inner.document.close(); 
     }, false); 
     function messageInner() { 
     inner.postMessage(Math.random(), '*'); 
     } 
    </script> 
    </head> 
    <body> 
    <iframe id="inner"></iframe> 
    <a href="#" onclick="messageInner(); return false">Clickety</a> 
    </body> 
</html>

document.write真的不應該使用，雖然;只需使用該內部腳本託管您自己的頁面（使用<iframe src="…">）。

來源

2010-12-19 21:39:29 ephemient

我知道這不是你正在尋找的答案，但我不認爲這是完全可能的，因爲後退按鈕由瀏覽器控制，而不是由javascript控制。

你可以修改你的代碼，當用戶點擊該按鈕，你可以做

window.location.href = 'http://www.youradress.com/yourpage?iframeurl=' + iframeurl;

，並在頁面加載您加載的URL的iframe的查詢字符串

這樣，你得到一個完整的頁面加載，url保留在歷史記錄中，並且後退按鈕可以按照您的需要工作

來源

2010-12-19 21:40:41

而不是Frame.open();使用Frame.open('text/html', 'replace');。

來源

2012-06-01 21:26:12 Steffen

Iframe和後退按鈕

回答

相關問題