防止使用JavaScript导航网页
如何防止使用JavaScript浏览网页?
使用onunload
只允许显示消息,但不会中断导航(因为太晚了)。 但是,您可以使用onbeforeunload
,它会中断导航:
window.onbeforeunload = function() { return "Are you sure you want to navigate away?"; }
编辑 :删除confirm()
返回语句,因为这导致了一个确认窗口如预期,但也显示第一次确认的结果第二次确认。
与这里介绍的其他方法不同,这些代码不会导致浏览器显示警告,询问用户是否要离开; 而是在浏览器有机会将其从内存中卸载之前,它利用DOM的性质重新定向回当前页面(从而取消导航)。
由于它直接通过短路导航工作,因此不能用来阻止页面closures; 但是,它可以用来禁用帧清除。
(function () { var location = window.document.location; var preventNavigation = function () { var originalHashValue = location.hash; window.setTimeout(function () { location.hash = 'preventNavigation' + ~~ (9999 * Math.random()); location.hash = originalHashValue; }, 0); }; window.addEventListener('beforeunload', preventNavigation, false); window.addEventListener('unload', preventNavigation, false); })();
免责声明:你不应该这样做。 如果一个页面上有破解代码,请尊重作者的意愿。
我结束了这个稍微不同的版本:
var dirty = false; window.onbeforeunload = function() { return dirty ? "If you leave this page you will lose your unsaved changes." : null; }
在其他地方,我把脏标志设置为true,当表单变脏时(或者我想避免导航)。 这使我可以轻松控制用户是否得到确认导航提示。
使用所选答案中的文本,您会看到多余的提示:
在Ayman的例子中,通过返回false来防止浏览器窗口/标签closures。
window.onunload = function () { alert('You are trying to leave.'); return false; }
使用onunload 。
对于jQuery,我认为这是这样工作的:
$(window).unload(function() { alert("Unloading"); return falseIfYouWantToButBeCareful(); });
相当于jQuery 1.11中接受的答案:
$(window).on("beforeunload", function () { return "Please don't leave me!"; });
JSFiddle示例
altCognito的答案使用了unload
事件,这对于JavaScript放弃导航而言太晚了。
这表明错误信息可能会重现浏览器已经显示的错误信息。 在chrome中,2个类似的错误消息在相同的窗口中被相继显示。
在Chrome中,在自定义消息之后显示的文本是:“你确定要离开这个页面?”。 在Firefox中,它根本不显示我们的自定义错误信息(但仍然显示对话框)。
更合适的错误消息可能是:
window.onbeforeunload = function() { return "If you leave this page, you will lose any unsaved changes."; }
或者是stackoverflow风格:“你已经开始写或编辑一个post了。”
使用现代的addEventListener API,以更现代和浏览器兼容的方式实现。
window.addEventListener("beforeunload", function (e) { var confirmationMessage = "\o/"; e.returnValue = confirmationMessage; // Gecko and Trident return confirmationMessage; // Gecko and WebKit });
来源: https : //developer.mozilla.org/en-US/docs/Web/Events/beforeunload
- 为什么`null> = 0 && null <= 0`而不是`null == 0`?
- Uncaught TypeError:无法执行'节点'上的'appendChild':参数1的types不是'Node'.draganddrop.html:20 dropdraganddrop.html:26
- Safari后退button问题
- Google AngularJS框架 – 值得冒险吗?
- Node.js – SyntaxError:意外的令牌导入
- 价值,原型和财产的差异
- 将一个JS数组分割成N个数组
- TypeScript中的“声明类”和“接口”有什么区别?
- 我如何使用HTML / CSS来实现高度均等(并排定位)?