Question

IFrame 和后退按钮

2010-12-19

4819

javascript html iframe

考虑以下 HTML：（为 Google Chrome 编写）

<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

使用一些新的 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 2

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

Steffen

2012-06-01

Answer 3

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

您可以修改代码，以便在用户单击按钮时执行此操作

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

并在页面加载时使用查询字符串中的 url 加载 iframe

这样，您就可以加载完整的页面，并且 url 保留在历史记录中，并且后退按钮可以按您希望的方式工作