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