多页面网站禁用浏览器后退键

Kerr1Gan 发布于2019-08-26 11:48 / 1133人阅读

摘要：如标题所说，本文提供的方法适用于多页面网站，如单页面应用等不适用。利用和控制浏览器后退键失效，下面说一下如何实现。当你在页面上写了浏览器会在中添加，同时页面并不跳转，但你只加了一次，所以只对一次后退事件起作用。

如标题所说，本文提供的方法适用于多页面网站，如SPA单页面应用等不适用。

利用window.onpopstate和window.history.pushState 控制浏览器后退键失效，下面说一下如何实现。

1.在你需要禁止浏览器后退键的页面上加上下面的代码：

当你加上上面的代码时，你发现当你点击一次浏览器的后退键，页面并没有后退，你可能感觉好像是解决问题了，但是当你再次点击后退键时页面还是返回到上一页面。

原因是window.history.pushState()方法是向浏览器历史添加了一个状态，它有三个参数分别是，一个状态对象（其实就是页面的参数），一个标题（现在被忽略了），以及一个可选的URL地址。

当你在页面上写了window.history.pushState({},null,location.href);浏览器会在history中添加location.href，同时页面并不跳转，但你只加了一次，所以只对一次后退事件起作用。如何彻底解决这个问题呢？还需要在全局增加onpopstate事件，详情请看第2步。

2.在全局增加一个onpopstate事件，这里我用的是匿名函数（当然也可以直接写）：

;(function(window,undefined){
  "use strict"
  //判断当前浏览器是否支持history和pushState,据我测试当前大部分浏览器都支持
  if(window.history && window.history.pushState)
  {
    window.onpopstate = function(){
      window.history.pushState({},null,"");
      //window.history.forward(1);  这句我没理解什么意思，不加也可以实现，所以注释掉了
    }
  }
})(window);

这时你发现，在你的目标页面上点击浏览器回退键页面不会跳转了，问题解决。但是上面的代码是什么意思呢？

window.onpopstate事件会监听浏览器的后退、前进按钮（或者在JavaScript代码中调用类似history.back()、history.forward()、history.go()方法），但是调用像 history.pushState() 或者history.replaceState() 不会触发popstate事件。

所以我们在全局中增加popstate监听事件，一但用户点击后退按钮时就会触发这个方法，该方法会再次向histroy中添加一个链接，防止用户再一次点击后退按钮。

GPU云服务器云服务器后退键 js屏蔽后退键页面后退防止页面后退

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/107603.html

多页面网站禁用浏览器后退键

摘要：如标题所说，本文提供的方法适用于多页面网站，如单页面应用等不适用。利用和控制浏览器后退键失效，下面说一下如何实现。当你在页面上写了浏览器会在中添加，同时页面并不跳转，但你只加了一次，所以只对一次后退事件起作用。如标题所说，本文提供的方法适用于多页面网站，如SPA单页面应用等不适用。利用window.onpopstate和window.history.pushState 控制浏览器后...

BLUE 2019-08-01 18:36 评论0 收藏0
单页面网站禁用浏览器后退键

摘要：项目上线后，客户反应当页面跳转到级或级页面，点击浏览器后退键时，页面返回上级页面后提示缺少参数，页面的数据也是空白的，为了解决这一问题，我的解决方案是禁用浏览器后退键，下面是解决方法在方法中，用监听地址变化。该文章适用于angularjs创建的单页面应用SPA，如vuejs或react.js不在本文讨论范围内。我用angularjs和sb-admin2实现了前端框架，在不考虑浏览器...

joywek 2019-08-01 18:38 评论0 收藏0
单页面网站禁用浏览器后退键

摘要：项目上线后，客户反应当页面跳转到级或级页面，点击浏览器后退键时，页面返回上级页面后提示缺少参数，页面的数据也是空白的，为了解决这一问题，我的解决方案是禁用浏览器后退键，下面是解决方法在方法中，用监听地址变化。该文章适用于angularjs创建的单页面应用SPA，如vuejs或react.js不在本文讨论范围内。我用angularjs和sb-admin2实现了前端框架，在不考虑浏览器...

Scholer 2019-08-26 17:15 评论0 收藏0