防止页面后退(使浏览器后退按钮失效)

本文介绍了如何通过修改历史记录来防止浏览器的后退功能,确保页面不可通过后退按钮返回。当使用pushState改变history时,会触发popstate事件。提供了两种方法,推荐的方法是在前端开发中实现页面后退无效的解决方案。
摘要由CSDN通过智能技术生成

原理:用新页面的URL替换当前的历史纪录,这样浏览历史记录中就只有一个页面,后退按钮永远失效。

注:history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,

页面由于使用pushState修改了history,会触发popstate事件。

方法一:

            jQuery(document).ready(function ($) {
                if (window.history && window.history.pushState) {
        $(window).on('popstate', function () {
            window.history.forward(1);
        });
      }
});

方法二【推荐】:

$(function() {
if (window.history && window.history.pushState) {
$(window).on('popstate', function () {
window.history.pushState('forward', null, '#');
window.history.forward(1);
});
}
window.history.pushState('forward', null, '#'); //在IE中必须得有这两行
window.history.forward(1);
})
     //控制浏览器和移动端的后退按钮
          if (window.history && window.history.pushState) {
            $(window).on(&
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值