iframe 实现内部页面返回上一级_iframe返回上一页-CSDN博客

本文解决了一个常见问题：在使用iframe的网页中，如何避免点击浏览器返回按钮导致整个页面回到登录页。通过添加自定义返回按钮及监听浏览器返回事件，实现了仅iframe内页面返回的功能。

1.问题所在

后台采用iframe的方式去写的当用户点击浏览器的返回上一级就会让页面回到登录页面。

2.想要实现效果

当用户点击上一级的时候只会让iframe里面的内容去返回上一级而不是整个iframe返回

3解决问题方案

3.1第一种解决方案

首先我想到的是给代码加一个返回上一级按钮轻松实现

代码如下

<span onclick="back()">返回上一级</span>
<script>

function back() {
        document.frames['admin'].history.back();
        return false;
    }
</script>

3.2监听浏览器的返回按钮

直接上代码

    function back() {
        document.frames['admin'].history.back();
        return false;
    }

    $(document).ready(function(e) {
        var counter = 0;
        if (window.history && window.history.pushState) {
            $(window).on('popstate', function () {
                window.history.pushState('forward', null, '#');
                window.history.forward(1);
                back();
                //alert("请使用自带的返回按钮操作");
            });
        }

        window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
        window.history.forward(1);
    });

经测试在苹果 chrome safari 下正常运行其他需自测