js禁止浏览器后退操作实现代码

诸位大佬,可否扫下右下方参与下“支付宝”红包活动!小弟万分感谢!

在大部分内部系统中,为避免用户的误操作进行后退。会对一些特定的页面进行页面后退禁止的代码,本文简单介绍如何通过js来实现禁止页面后退!

方法一:后退后,会有一个前进操作!(用户体验度不友好)

<script language="javascript"> 
javascript:window.history.forward(1);
</script>

方法二:通过禁用键盘的backspace键(不能有效的监听到鼠标的点击!)

代码实现:通过监听键盘的backspace键点击事件,来禁止后续操作!

方法三:利用html5的新属性history pushState来进行监听(该方法效果是三个中最为理想的)

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

代码解读:

history.pushState方法接受三个参数,依次为:
state:一个与指定网址相关的状态对象,popstate事件触发时,该对象会传入回调函数。如果不需要这个对象,此处可以填null。
title:新页面的标题,但是所有浏览器目前都忽略这个值,因此这里可以填null。
url:新的网址,必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。

popstate:当活动历史记录条目更改时,将触发popstate事件

通过监听popstate来,进行浏览器后退的拦截,禁止浏览器后退!