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

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

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

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

<script>
$(document).ready(function(){
  //判断当前浏览器是否支持history和pushState,据我测试当前大部分浏览器都支持
  if(window.history && window.history.pushState){
    window.history.pushState({},null,location.href);
  }
});
</script>

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

原因是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中添加一个链接,防止用户再一次点击后退按钮。

    原文作者:hellowoody
    原文地址: https://segmentfault.com/a/1190000013338702
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞