js禁止浏览器的回退事件

最新推荐文章于 2024-06-23 04:15:59 发布

Json_wangqiang

最新推荐文章于 2024-06-23 04:15:59 发布

阅读量350

点赞数

CC 4.0 BY-SA版权

分类专栏：前端杂记文章标签： js禁止浏览器的回退事件

本文链接：https://blog.youkuaiyun.com/Json_wangqiang/article/details/85276143

前端杂记专栏收录该内容

29 篇文章

订阅专栏

本文介绍了一种利用JavaScript和HTML5的history API彻底禁用浏览器回退功能的方法，包括键盘和鼠标手势触发的后退行为。通过使用pushState和监听popstate事件，可以有效地阻止用户返回到前一页面。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

js禁止浏览器的回退事件

直接来个终极方案：

查找了好多资料才找到的，这种方式，可以消除后退的所有动作。包括键盘、鼠标手势等产生的后退动作。

<script language="javascript">
    //防止页面后退
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
    });
</script>

现在，我们项目中就使用了这种方式。在常用浏览器中，都可以禁用了后退。

具体实例：

$(function(){
    if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', forbidBack);
    }
})
/**
 * 禁止回退按钮
 */
function forbidBack(){
    appUtils.mobileConfirm("确定放弃重置密码?",function(){//yes
        window.removeEventListener('popstate',forbidBack);
        muiwindow.muiwebview({"url":"login.html"});
    },function(){//no
        //防止页面后退
        history.pushState(null, null, document.URL);
    });
}

PS：关于addEventListener与removeEventListener的注意事项可参考: http://www.cnblogs.com/JsonShare/p/6737499.html

关于HTML5 history新特性pushState、replaceState ： http://blog.youkuaiyun.com/tianyitianyi1/article/details/7426606