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

作者 : 开心源码 本文共1519个字,预计阅读时间需要4分钟 发布时间: 2022-05-12 共173人阅读

原理:用新页面的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('popstate', function () {              var block1 = $('#pop').css('display');              if (block1 == 'block') {                window.location.href = attrHref;              }              var hashLocation = location.hash;              var hashSplit = hashLocation.split("#!/");              var hashName = hashSplit[1];              if (hashName !== '') {                var hash = window.location.hash;                if (hash === '') {                  popBox.style.display = 'none'                  popSub.style.display = 'block'                }              }            });            history.pushState(null, null, location.href);            window.addEventListener('popstate', function (event) {              history.pushState(null, null, location.href);            });          }
   window. history.forward() --- 此方法加载历史列表中的下一个 URL,同浏览器中点击向前按钮;
   window. history.back() --- 此方法加载历史列表中的前一个 URL,同浏览器中点击后退按钮。
window.history.pushState(null, "", "#/tieOnCardPage") //这是你想 返回的 页面 
window.history.pushState(null, "", "#/setPasswordPage") //这是本页面


假如你仍然在编程的世界里迷茫,不知道自己的未来规划,可以加入前台学习进阶内推交流群685910553(前台资料分享)。里面可以与大神一起交流并走出迷茫。

新手可免费领取学习资料,看看前辈们是如何在编程的世界里傲然前行不停升级最新的教程和学习方法(详细的前台项目实战教学视频),

有想学习web前台的,或者是转行,或者是大学生,还有工作中想提升自己能力的,正在学习的小伙伴欢迎加入

说明
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,不得违反国家法律。否则后果自负!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是摆设,本站源码仅提供给会员学习使用!
7. 如遇到加密压缩包,请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 防止页面后退(使浏览器后退按钮失效)

发表回复