Question

当涉及 iframe 时，让“返回”按钮在父页面上起作用

2016-04-04

4185

javascript jquery html iframe browser

我正在开发一个涉及 iframe 的旧版应用程序。后退按钮在 iframe 上工作，我需要它绕过 iframe 并仅在父窗口上工作。

以下是问题的简化版本以及我所知道的内容的描述。

主页“index.html”有一个通过 javascript 添加的 iframe。它加载 a.html，进行 ajax 调用，然后执行 window.location =“b.html”此时，如果您使用后退按钮，它实际上会使 iframe 返回 a.html，然后重定向到 b.html，因此您实际上停留在页面上。如果我删除 ajax 调用并在加载时执行 window.location，一切都会正常。但是考虑到架构和页面上发生的情况，我无法从图片中删除 Ajax 调用。

这是我正在查看的代码，请让我知道您对如何解决此问题的想法。另外我应该提到，在 Chrome 41 中这不是问题，但在较新的 chrome 48 和 49 中这是一个问题。我尝试了 history.replaceState，但无法找到一种在这种情况下使用它的方法。

index.html

    <html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body>
hello world!
<div id="iframeContainer"></div>

<script>
    $(function () {

        var newIframe = document.createElement('iframe');
        newIframe.src = "a.html";
        newIframe.id = "A";

        document.getElementById("iframeContainer").appendChild(newIframe);

    });
</script>
</body>
</html>

a.html

<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#F00;">

    <script>
    $(function(){
        $.ajax({
            url:"b.html",
            complete:function(){
                window.location="b.html";
            }
        });
    });
    </script>
</body>
</html>

b.html

<html>
<head>
    <title></title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
</head>
<body style="background-color:#00F;">
<script>
    $(function(){
    })
</script>
</body>
</html>

Answer 1

这仅在兼容 HTML5 的浏览器中才有可能，并且会像这样..

这发生在子框架中..

// catch the back button click.
window.onpopstate = function(event) {
  // make the parent window go back
  top.history.back();
};

这也仅当两个框架位于同一域中时才有效。