jQuery 在浏览器窗口/选项卡关闭上打开自定义弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19263277/
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
open a custom popup on browser window/tab close
提问by Mufeed
I am trying to open a custom popup on browser window/tab close.
我正在尝试在浏览器窗口/选项卡关闭时打开自定义弹出窗口。
In details if a user clicks on the browser window/tab close button a custom popup will appear with some content or may be having some option asking to close or continue the page.
详细地说，如果用户单击浏览器窗口/选项卡关闭按钮，则会出现带有某些内容的自定义弹出窗口，或者可能有某些选项要求关闭或继续该页面。
here is the code which only bring the default alert popup:
这是仅带来默认警报弹出窗口的代码：
window.onbeforeunload = function() {
var message = 'Do you want to leave this page?';
return message;
}
回答by Dementic
i would also suggest you dont do this, but after all, you asked a question and deserve an answer.
我还建议你不要这样做，但毕竟你提出了一个问题，应该得到一个答案。
<script type="text/javascript">
var popit = true;
window.onbeforeunload = function() {
if(popit == true) {
popit = false;
return "Are you sure you want to leave?";
}
}
</script>
this script will work (http://jsfiddle.net/SQAmG/3/) and will make sure that it will only popup once (to not bother the user again if he decided to stay once).
该脚本将起作用（http://jsfiddle.net/SQAmG/3/），并确保它只会弹出一次（如果他决定留下一次，则不会再次打扰用户）。
回答by Kamlesh
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title>K3logics.com</title>
<script>
var mouseX = 0;
var mouseY = 0;
var popupCounter = 0;
document.addEventListener("mousemove", function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
});
$(document).mouseleave(function () {
if (mouseY < 100) {
if (popupCounter < 1) {
alert("Please do not close the tab!");
}
popupCounter ++;
}
});
</script>
</head>
<body>
<div id="page-wrap">
<span id="coordinates"></span>
<h1>Hi, Move your mouse cursor around then try to close the window of browser! - <a href="https://www.k3logics.com" target="_blank">https://www.k3logics.com</a></h1>
</div>
</body>
</html>回答by Gabriela Suarez Carvajal
On october 2019 it's possible just in internet explorer https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
2019 年 10 月，仅在 Internet Explorer 中即可实现 https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event
回答by Neel
The feature you're talking about is the window.onbeforeunload event, and unfortunately the only way it can be customized is to provide a custom string message for the user, because the potential for abuse is so high.
您正在谈论的功能是 window.onbeforeunload 事件，不幸的是，可以自定义它的唯一方法是为用户提供自定义字符串消息，因为滥用的可能性非常高。
The api reference over at msdn for Internet Explorer states:
Internet Explorer 的 msdn 上的 api 参考指出：
The default statement that appears in the dialog box, "Are you sure you want to navigate away from this page? ... Press OK to continue, or Cancel to stay on the current page.", cannot be removed or altered.
I take this to mean the dialog itself cannot be altered, all you can do is provide an additional context-specific message. I cant locate the same reference for Chrome, but it seems to be the same story there.
我认为这意味着无法更改对话框本身，您所能做的就是提供额外的特定于上下文的消息。我找不到 Chrome 的相同参考，但那里似乎是同一个故事。
window.onbeforeunload = function() {
//all you can do is provide a message..
return "you have unsaved changes, if you leave they will be lost";
}
