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

IT技术 javascript jquery
2021-03-12 14:21:25

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

详细地说,如果用户单击浏览器窗口/选项卡关闭按钮,则会出现带有某些内容的自定义弹出窗口,或者可能有某些选项要求关闭或继续该页面。

这是仅带来默认警报弹出窗口的代码:

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

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

这个脚本工作正常。但是如果关闭时,弹出窗口将不会再次出现,直到清除缓存
2021-05-18 14:21:25

我还建议你不要这样做,但毕竟你提出了一个问题,应该得到一个答案。

<script type="text/javascript">
     var popit = true;
     window.onbeforeunload = function() { 
          if(popit == true) {
               popit = false;
               return "Are you sure you want to leave?"; 
          }
     }
</script>

该脚本将起作用(http://jsfiddle.net/SQAmG/3/),并确保它只会弹出一次(如果他决定留下一次,则不会再次打扰用户)。

jsfiddle.net/SQAmG/5 现在看到这个你会更好地理解..,可能无法正确解释。需要在关闭时显示此弹出窗口而不是该默认警报消息。
2021-04-22 14:21:25
您不能使用自己的对话框来覆盖默认对话框,这个问题已经被问到,并且得到了很好的答案stackoverflow.com/questions/6063522/jquery-beforeunload/...
2021-04-22 14:21:25
这个答案在 2021 年有效吗?我检查了两个 jsfiddle,都没有显示弹出窗口,我的选项卡被关闭了。
2021-05-13 14:21:25

在此处输入图片说明

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

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

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


};

js小提琴

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

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

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.

我认为这意味着无法更改对话框本身,您所能做的就是提供额外的特定于上下文的消息。我找不到 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() { //所有你能做的就是提供一条消息..不起作用并通过单击默认警报关闭窗口
2021-05-20 14:21:25