html页面禁止返回代码,多页面网站禁用浏览器后退键

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

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

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

$(document).ready(function(){

//判断当前浏览器是否支持history和pushState,据我测试当前大部分浏览器都支持

if(window.history && window.history.pushState){

window.history.pushState({},null,location.href);

}

});

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

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

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

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

;(