禁用浏览器器返回按钮

Posted 2020-09-03

场景：今天在项目中遇到一种场景，需要禁用浏览器返回按钮，防止用户误操作。考虑试用一下history的新伙伴，history.pushState(),popstate事件

尝试：在各大网友的谋略中，用的最多的版本

history.pushState(null, null, document.URL);
$(window).on(‘popstate‘, function() {
history.pushState(null, null, document.URL);
});

果然不错，chrome和Firefox运行良好！

然后，填坑之路漫长啊，IE10+不给力啊，在IE中，url改变是不会触发popstate事件，只有在做出浏览器动作时，才会触发该事件，如用户点击浏览器的回退按钮（或者在javascript代码中调用history.back()）！这样就不能够使用history.pushState()来抵消用户点击后退按钮。

 

解决办法：还好history还有一个hashchange事件，考虑一下两者的结合

在chrom和firefox中使用

history.pushState(null, null, document.URL);
$(window).on(‘popstate‘, function() {
history.pushState(null, null, document.URL);
});

在IE中使用两者：

history.pushState(null, null, document.URL);
$(window).on(‘popstate‘, function() {
history.pushState(null, null, document.URL);
});

$(window).on(‘hashchange‘, function() {
history.pushState(null, null, document.URL);
});