如题目所说，本文供应的要领实用于多页面网站，如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中增添一个链接，防备用户再一次点击退却按钮。