html禁止后退按钮,关于禁止页面后退的一些方法

最近在项目中遇到登录页面进行跳转到主页，退出登录跳转到登录界面等，发现浏览器默认的后退按钮很是蛋疼，因为项目上是尽量前端去保存用户状态，没有后台进行session校验，故跳转的时候要注意的是后退按钮的禁用，找了几种方法，感觉不错，分享出来。

①在IE9及其以上，各种主流浏览器上

使用浏览器history这个api，HTML5中新引入的pushState()和 replaceState()方法则是首选。 由于两者作用差不多，只讲其中一种pushState()

使用方法：history.pushState(stateObject,title,URL)

pushState是一个历史记录的管理的方法，其中stateObject是一个对象，存储于这条历史相关的状态信息，通常写为null即可，title取标题，也取null，URL是URL的历史记录的意思，即给这个窗口的历史记录添加一个URL，并不是会页面进行跳转的意思。具体使用如下：

image.png

之后动态去监控popstate的后退或者前进内容，触发的时候调用history.pushState(stateObject,title,URL)，那么做到用户后退时一直进去的是我们添加的那个历史记录里。

②IE9以下的低版本浏览器

这类浏览器没有pushState()方法，也做不到动态监控popstate的内容了，此时的浏览器只有hash哈希地址的变化的监控(浏览器的url后用#接地址来完成页面变化的方式)，此时操控浏览器的历史通过window.location.hash来完成，具体如下

image.png

在一开始的时候固定一个哈希，在浏览器的后退或前进时url发生改变时，那么利用window.onhashchange事件监听变化，再进行固定即可。

经过以上两种方法，可以解决禁用后退功能按钮的问题

个人项目上使用第一种

image.png