jQuery beforeunload custom pop up window for leaving a page
嗨,我想自定义弹出窗口以便离开页面,有没有简单的方法可以做到这一点?
我正在使用简单的jQuery
1 2 3 4 5 6 | $(document).ready(function() { var myPopUp = $('#pop-up').css('display', 'block'); $(window).bind('beforeunload', function(){ return 'load my pop up here instead of the default browser message'; }); }); |
我的html弹出窗口是默认隐藏的
1 2 3 | Are you sure wanna leave Leave Stay |
谢谢
简短的回答:不能。
更长的答案:
出于非常明显的"安全性"原因,当用户尝试从页面导航/关闭选项卡或以任何其他方式离开站点时,您只能执行有限的操作。
原因是浏览器要绝对确保您不能阻止用户关闭他/她想要关闭的选项卡或窗口。
因此,
某些浏览器允许您指定消息,而其他浏览器(包括firefox)甚至不允许您更改消息(因为您可能会通过询问"我可以领养未出生的儿子吗?"来欺骗用户)... AFAIK大多数浏览器都允许除了不能更改的标准消息外,您还可以指定选择的字符串。某些浏览器(没有主要的桌面浏览器)甚至完全缺少该事件。
您想要实现的基本上是迫使用户停留在您的页面上,然后显示一个漂亮的弹出窗口,要求他们进行确认……尽管在很多情况下这肯定可以改善用户体验,但是您不会不必费力思考就可以想象如何将其滥用以简单地不允许用户离开。
考虑一下破坏后退按钮的网站多么令人讨厌,然后想象它们甚至可以消除您关闭选项卡的能力!
我偶然发现了一个用户在论坛上提出的这个相当有趣的问题,该用户花了很多时间试图阻止甚至增加一点烦恼-简短的摘录:
I do not like onunload and onbeforeunload. I do not think they should
EVER be fired on my firefox installation. I do not think there is any
useful application of these events, not even the benevloent"you have
unsaved work!" popups. When I tell my web browser to close a web page,
I do not want a web page to prevent (or delay) the browser from
closing it--at all ever.
并添加一些官方信息:
mozilla.org:WindowEventHandlers.onbeforeunload:
Since 25 May 2011, the HTML5 specification states that calls to
window.alert(), window.confirm(), and window.prompt() methods may be
ignored during this event. See the HTML5 specification for more
details.
这个问题在诸如此类的多个stackoverflow帖子中已经提出并回答过
如果您还可以详细说明离开"页面"的情况,那么您可能会得到更好和适当的答案。
如果您要警告该用户保存之前,请先检查链接的顶部。如果您只是想在离开页面前发出警告,
尝试使用Hunter用户留下的以下答案:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <script type='text/javascript'> function goodbye(e) { if(!e) e = window.event; //e.cancelBubble is supported by IE - this will kill the bubbling process. e.cancelBubble = true; e.returnValue = 'You sure you want to leave?'; //This is displayed on the dialog //e.stopPropagation works in Firefox. if (e.stopPropagation) { e.stopPropagation(); e.preventDefault(); } } window.onbeforeunload=goodbye; |
https://developer.mozilla.org/zh-CN/docs/Web/API/WindowEventHandlers/onbeforeunload#Browser_compatibility
它不可能有一个自定义弹出窗口,请参见指定的链接