IFrame 和后退按钮答案

【问题标题】：IFrames And The Back ButtonIFrame 和后退按钮
【发布时间】：2010-12-19 20:54:13
【问题描述】：

考虑以下 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 退出历史记录，然后才从主页“返回”？

【问题讨论】：

为什么“必须使用 document.write”？？
因为没有代表我要呈现的 HTML 的 URL - 我从 JavaScript 动态生成 HTML
有很多 DOM 操作技术比原始的 document.write 要好得多。除此之外，它们还允许您复制和保存以及移动和删除节点。

标签： javascript html iframe

【解决方案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="…">）。

【讨论】：

【解决方案2】：

用Frame.open('text/html', 'replace');代替Frame.open();。

【讨论】：

【解决方案3】：

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

你可以修改你的代码，当用户点击你可以做的按钮时

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

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

这样，您会获得完整的页面加载，并且 url 会保留在历史记录中，并且后退按钮可以按您的意愿工作

【讨论】：