Question

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

以下是我所知道的问题和描述的愚蠢版本。

主页＆＃34; index.html＆＃34;有一个通过javascript添加的iframe。它加载a.html，进行ajax调用，然后执行window.location =＆＃34; b.html＆＃34;此时，如果您使用后退按钮，它基本上会使iframe返回到a.html，然后重定向到b.html，这样您就会被卡在页面上。如果我删除了ajax调用并在加载时执行window.location，一切正常。但是考虑到架构和页面上发生的事情，我无法从图片中删除Ajax调用。

以下是我正在查看的代码，让我知道您对如何解决此问题的看法。另外我应该在Chrome 41中提到这不是一个问题，但是较新的镀铬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();
};

这也适用于两个帧都在同一个域中的情况。

当涉及iframe时，获取后退按钮以在父页面上工作

1 个答案: