首页 > 代码库 > 禁用浏览器器返回按钮

禁用浏览器器返回按钮

场景:今天在项目中遇到一种场景,需要禁用浏览器返回按钮,防止用户误操作。考虑试用一下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);
});

 

禁用浏览器器返回按钮