在浏览器窗口/选项卡关闭时打开自定义弹出窗口答案

【问题标题】：open a custom popup on browser window/tab close在浏览器窗口/选项卡关闭时打开自定义弹出窗口
【发布时间】：2013-10-09 04:38:52
【问题描述】：

我正在尝试在浏览器窗口/标签关闭时打开自定义弹出窗口。

详细来说，如果用户单击浏览器窗口/标签关闭按钮，则会出现一个自定义弹出窗口，其中包含一些内容，或者可能有一些选项要求关闭或继续页面。

这里是只带默认警报弹出的代码：

window.onbeforeunload = function() {
              var message = 'Do you want to leave this page?';
              return message;
          }

【问题讨论】：

不不，不要这样做，这是一种糟糕的用户体验。用户希望点击关闭选项卡时会关闭它，并显示一条提醒垃圾网站的消息。
感谢您的宝贵意见......但我暂时想实现它有一个重要的原因。

标签： javascript jquery

【解决方案1】：

<!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>

【讨论】：

这个脚本运行良好。但是如果关闭后，弹出窗口将不会再次出现，直到清除缓存

【解决方案2】：

我也建议你不要这样做，但是，你问了一个问题，应该得到一个答案。

更新（2022 年） 由于新的浏览器安全设置，此代码不再有效。

var popit = true;
window.onbeforeunload = function() {
  if (popit == true) {
    popit = false;
    return "Are you sure you want to leave?";
  }
}

【讨论】：

jsfiddle.net/SQAmG/5 现在看到这个你会更好地理解..，可能无法正确解释。需要在关闭时显示此弹出窗口而不是默认警报消息。
不能用自己的对话框覆盖默认的，这个问题已经问过了，得到了很好的回答stackoverflow.com/questions/6063522/jquery-beforeunload/…
这个答案在 2021 年有效吗？我检查了两个 jsfiddle 并且两者都没有显示弹出窗口并且我的标签被关闭了。
我可以显示一个模态吗？如果可以，如何？

【解决方案3】：

2019 年 10 月，仅在 Internet Explorer 中即可 https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

【讨论】：

【解决方案4】：

window.onbeforeunload = function (e) 
{
    e = e || window.event;

        e.returnValue = 'You want to leave ? ';


};

jsFiddle

【讨论】：

这不是我真正要问的？？？看起来和我试过的一样。但真的很感谢您的时间。
jsfiddle.net/SQAmG/5 现在看到这个你会更好地理解..，可能无法正确解释。需要在关闭时显示此弹出窗口而不是默认警报消息。

【解决方案5】：

您所说的功能是 window.onbeforeunload 事件，不幸的是，可以自定义它的唯一方法是为用户提供自定义字符串消息，因为滥用的可能性非常高。

在 msdn 上为 Internet Explorer 提供的 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.

我认为这意味着对话框本身无法更改，您所能做的就是提供额外的特定于上下文的消息。我找不到 Chrome 的相同参考资料，但那里似乎是同一个故事。

window.onbeforeunload = function() {
    //all you can do is provide a message..
    return "you have unsaved changes, if you leave they will be lost";
}

【讨论】：

如果我在 window.onbeforeunload = function() { //所有你能做的就是提供一条消息..不起作用并通过单击默认警报关闭窗口

【解决方案6】：

如果您愿意使用 jQuery UI，那么您可以使用Dialog。简单，看起来很有吸引力。

【讨论】：