js禁止浏览器的回退事件

现在很多的内部系统，一些界面，都是用户手动点击退出按钮的。
但是为了避免，用户误操作点击浏览器后退，或者用鼠标手势后退什么的。容易出现误操作。
所以在有些页面上，适当的禁用浏览器的后退，是可以提高很大的用户体验。
在网上查，可以查到很多js禁用后退的材料。

终极方案

直接来个终极方案：
查找了好多资料才找到的，这种方式，可以消除 后退的所有动作。包括 键盘、鼠标手势等产生的后退动作。
在禁止回退的页面添加，如下代码:

<script language="javascript">
    //防止页面后退
    history.pushState(null, null, document.URL);
    window.addEventListener('popstate', function () {
            history.pushState(null, null, document.URL);
    });
</script>

现在，我们项目中就使用了这种方式。在常用浏览器中，都可以禁用了后退。

具体实例

$(function(){
    if (window.history && window.history.pushState) {
            history.pushState(null, null, document.URL);
            window.addEventListener('popstate', forbidBack);
    }
})
/**
 * 禁止回退按钮
 */
function forbidBack(){
    appUtils.mobileConfirm("确定放弃重置密码?",function(){//yes
        window.removeEventListener('popstate',forbidBack);
        muiwindow.muiwebview({"url":"login.html"});
    },function(){//no
        //防止页面后退
        history.pushState(null, null, document.URL);
    });
}

---

谢谢支持！更多分享，欢迎关注本人公众号:猿来在痴。
↓↓↓微信扫码↓↓↓

聚焦程序猿的世界，探讨技艺，分享资源，侃谈生活……

---

参考

关于addEventListener与removeEventListener的注意事项可参考: http://www.cnblogs.com/JsonShare/p/6737499.html
关于HTML5 history新特性pushState、replaceState参考: http://blog.csdn.net/tianyitianyi1/article/details/7426606