利用JavaScript实现禁用浏览器后退

最近做需求时出现的问题：

点击“意向国家和地区”对应的“请选择”，出现一个弹框，这个弹框可以选择国家和地区的弹框，弹框占据了一整个页面，当用户不想选择也就是不点击“确认”的时候，想按“返回”就直接返回到前一个页面了，用户体验感差。

出现这样问题的原因：是因为弹框在当前页面，点击“返回”的时候，的确是返回上一页。

解决办法：
法一：把弹框写为二级页面，但这样改动的地方比较多，比较麻烦。
法二：在弹框显示的时候，JavaScript监听浏览器的返回事件，监听之后需要做两件事：禁止浏览器返回事件和关闭弹框。在弹框关闭时启用浏览器返回事件。

查了很多资料怎么禁用浏览器返回事件。最终在这篇文章中找到了方法，这篇讲了三种方法，我试验之后，自己采用了终极方案。

1、回退后，产生一个前进事件。
这种方式，不算是一个满意的解决方式。因为用户能体验到，界面的后退，前进。体验不好。

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

3、终极方案：
也是查找了好多资料才找到的，这种方式，可以消除后退的所有动作。包括键盘、鼠标手势等产生的后退动作。

<script language="javascript">//防止页面后退history.pushState(null, null, document.URL);window.addEventListener('popstate', function () {history.pushState(null, null, document.URL);});
</script>现在，我们项目中就使用了第三种方式。在常用浏览器中，都可以禁用了后退。

//禁用浏览器返回
function fobidden_back() {
//防止页面后退
history.pushState(null, null, document.URL);
window.addEventListener(‘popstate’,back_common)
}
//启用浏览器返回
function enable_back() {
history.go(-1);
window.removeEventListener(‘popstate’,back_common)
}
function back_common() {
history.pushState(null, null, document.URL);
}

利用JavaScript实现禁用浏览器后退相关推荐

手机浏览器利用js实现禁用浏览器后退
利用js实现禁用浏览器后退现在很多的内部系统,一些界面,都是用户手动点击退出按钮的.但是为了避免,用户误操作点击浏览器后退,或者用鼠标手势后退什么的.容易出现误操作. 所以在有些页面上,适当的禁 ...
javascript怎么禁用浏览器后退按钮
1. 复制代码代码如下: <script language="JavaScript"> javascript:window.history.forward(1); & ...
利用js实现禁用浏览器后退| 去除上一个历史记录链接
也是查找了好多资料才找到的,这种方式,可以消除后退的所有动作.包括键盘.鼠标手势等产生的后退动作.<script language="javascript">//防 ...
利用js实现禁用浏览器后退
对就是禁用这个东西. 这种方式,可以消除后退的所有动作.包括键盘.鼠标手势等产生的后退动作. <script language="javascript">//防止页 ...
php微信浏览器自带后退功能禁用,jquery如何实现禁用浏览器后退
jquery实现禁用浏览器后退的方法:首先打开相应的js文件:然后通过"jQuery(document).ready(function () {...}"方法禁用浏览器的back和 ...
vue中使用，js禁用浏览器后退按钮
* js禁用浏览器后退按钮 * vue中使用*/ methods:{goBack(){history.pushState(null,null,document.URL);}, } destroyed( ...
JavaScript禁用浏览器后退按钮
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ 开发工具与关键技术:vs20 ...
JavaScript如何实现禁用浏览器后退按钮
方法一: <script>window.history.forward(1); </script> 利用JS产生一个"前进"的动作,以抵消后退功能,这种方法 ...
Html5禁止浏览器后退,多页面网站禁用浏览器后退键
如标题友,记基开前不接些前家我告对猿果水使钮控所说,本文提供的方法适用于多页面网站,如SPA单页面应朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到随用等不适用. 利用w不的期是 ...

利用JavaScript实现禁用浏览器后退

利用JavaScript实现禁用浏览器后退相关推荐

最新文章

热门文章