Javascript jQuery beforeunload 用于离开页面的自定义弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30712377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery beforeunload custom pop up window for leaving a page
提问by dikei
Hi I would like to customize my pop up for leaving a page, is there any simple way to do that?
嗨，我想自定义退出页面的弹出窗口，有什么简单的方法可以做到吗？
I am using simple jQuery
我正在使用简单的 jQuery
$(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';
});
});
my html for the pop up is which is hidden by default
我的弹出窗口的 html 是默认隐藏的
<div id="pop-up">
<h2>Are you sure wanna leave</h2>
<a href="#">Leave</a>
<a href="#" class="close">Stay</a>
</div>
Thanks
谢谢
回答by Mikk3lRo
Short answer: You can't.
简短的回答：你不能。
Longer answer: For rather obvious "security" reasons it is very limited what you can do when a user tries to navigate away from a page / close a tab or in any other way leave the site.
更长的答案：出于相当明显的“安全”原因，当用户尝试离开页面/关闭选项卡或以任何其他方式离开站点时，您可以执行的操作非常有限。
The reason is that browsers want to make absolutely sure that you cannot prevent the user from closing a tab or window that he / she wantsto close.
原因是，浏览器要绝对确保你不能阻止用户关闭标签或窗口，他/她想要接近。
Therefore the onbeforeunloadjavascript event - and by extension the beforeunloadjQuery event - are extremely limited in what they can do. One of the things they definitely cannotdo is prevent the page from closing - except using one very standardized and rather boring method the browser (usually) allows.
因此，onbeforeunloadjavascript 事件 - 以及扩展的beforeunloadjQuery 事件 - 它们可以做的事情非常有限。他们绝对不能做的一件事是阻止页面关闭 - 除了使用浏览器（通常）允许的一种非常标准化且相当无聊的方法。
Some browsers allow you to specify a message, while others (including firefox) do not even allow you to change the message (because you might trick the user by asking "Can I adopt your unborn son?")... AFAIK most browsers allow you to specify a string of your choosing in additionto a standard message that cannot be changed. Some browsers (no major desktop browsers) even lack the event completely.
某些浏览器允许您指定消息，而其他浏览器（包括 Firefox）甚至不允许您更改消息（因为您可能会通过询问“我可以收养您未出生的儿子吗？”来欺骗用户）...... AFAIK 大多数浏览器允许除了无法更改的标准消息之外，您还可以指定您选择的字符串。一些浏览器（没有主要的桌面浏览器）甚至完全没有这个事件。
What you want to achieve is basically to force the user to stay on your page, and then show a nice pop-up asking them to confirm... and while this could definitely improve the user experience in a lot of cases, you don't have to think very hard to imagine how it could be abused to simply not allow the user to ever leave.
你想要实现的基本上是强迫用户留在你的页面上，然后显示一个很好的弹出窗口，要求他们确认......虽然这在很多情况下肯定可以改善用户体验，但你没有不必非常努力地想象它会如何被滥用，根本不允许用户离开。
Think about how annoying sites that break the back-button are, then imagine they could even remove your ability to close a tab!
想想打破后退按钮的网站是多么烦人，然后想象它们甚至可以删除您关闭标签的能力！
I stumbled on thisrather amusing forum question from a user who has spent an extensive amount of time trying to prevent even what little annoyance canbe added - a short excerpt:
我从一个用户那里偶然发现了这个相当有趣的论坛问题，该用户花费了大量时间试图阻止甚至可以添加一点点烦恼- 一个简短的摘录：
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.
我不喜欢 onunload 和 onbeforeunload。我不认为他们应该在我的 Firefox 安装中被解雇。我不认为这些事件有任何有用的应用，即使是仁慈的“你有未保存的工作！” 弹出窗口。当我告诉我的网络浏览器关闭一个网页时，我不希望一个网页阻止（或延迟）浏览器关闭它——从来没有。
And just to add a little bit of somewhat official information:
并补充一点官方信息：
mozilla.org: WindowEventHandlers.onbeforeunload:
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.
自 2011 年 5 月 25 日起，HTML5 规范规定在此事件期间可以忽略对 window.alert()、window.confirm() 和 window.prompt() 方法的调用。有关更多详细信息，请参阅 HTML5 规范。
回答by lifejuggler
This question have been asked and answered in several stackoverflow posts such as this one
这个问题已经被问和几个计算器的帖子回答诸如这样一个
If you can also elaborate on what the circumstances of leaving the "page", you could probably get a better and proper answer. If you want to warn that user should save before then checkout the top post of the link. If you just want to warn before you leave the page, try this answer that user Hunterleft:
如果您还可以详细说明离开“页面”的情况，您可能会得到更好和正确的答案。如果您想警告用户应该先保存，然后查看链接的顶部帖子。如果您只想在离开页面之前发出警告，请尝试用户Hunter留下的答案：
<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;
</script>
回答by kishore kingmaker
its is not possible to have a custom popup see the link specified
不可能有自定义弹出窗口看到指定的链接
