Question

考虑以下HTML :(针对谷歌浏览器编写）

<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超出历史记录，然后才从主页面“返回”？

Answer 1

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

Answer 2

使用一些新的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="…">）。

Answer 3

我知道这不是你要找的答案，但我认为这根本不可能，因为后退按钮是由浏览器而不是javascript控制的。

您可以将代码修改为用户点击您可以执行的按钮

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

并在页面加载时使用查询字符串

中的url加载iframe 这样，您就可以获得整页加载，并且网址会保留在历史记录中，后退按钮会按照您的需要运行

IFrames和后退按钮

3 个答案: