js禁止浏览器后退操作实现代码
JavaScipt
2019-02-22 09:46:34
在大部分内部系统中,为避免用户的误操作进行后退。会对一些特定的页面进行页面后退禁止的代码,本文简单介绍如何通过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来,进行浏览器后退的拦截,禁止浏览器后退!
六月初字帖坊小程序
你想要的字帖模板及工具,这里都有!
877篇文章
3440人已阅读