javascript中如何检测浏览器标签关闭事件
[英]How to detect browser tab close event in javascript
问题描述
Tried to call browser tab close event when click on close tab icon in chrome browser but not working.I want to show alert message before close the browser tab.How do it?
在 chrome 浏览器中单击关闭选项卡图标时尝试调用浏览器选项卡关闭事件但不起作用。我想在关闭浏览器选项卡之前显示警报消息。怎么做？
Below code is not working:下面的代码不起作用：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
var message = "Are you sure?";
/* InternetExplorer/Firefox*/
var e = evt || window.event
e.returnValue = message
/* WebKit browser */
return message;
}
</script>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
3 个解决方案
解决方案1
2 2020-08-06 16:33:47
In some browsers, calls to window.alert(), window.confirm(), and window.prompt() may be ignored during this event.
https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event https://developer.mozilla.org/zh-CN/docs/Web/API/Window/beforeunload_event
Try a console.log and check "Preserve Log" in your Console.尝试 console.log 并在控制台中选中“保留日志”。 You will see that it's just alert() that doesn't work in your case你会看到它只是alert()在你的情况下不起作用
解决方案2
1 2020-08-06 16:28:58
You are in fact correctly detecting the tab close event.您实际上正在正确检测选项卡关闭事件。 The problem is with your triggered action.问题出在您的触发操作上。 From the relevant MDN documentation :来自相关的 MDN 文档：
To combat unwanted pop-ups, some browsers don't display prompts created in
beforeunloadevent handlers unless the page has been interacted with.beforeunload事件处理程序中创建的提示，除非页面已与之交互。 Moreover, some don't display them at all.
This means that it's going to be very difficult for you to show an alert message before closing the browser tab as you say you want do you.这意味着您很难在关闭浏览器选项卡之前显示警告消息，就像您说的那样。 You can however achieve something similar by using the return value on the handler.但是，您可以通过使用处理程序的return值来实现类似的目的。 Again quoting from the documentation:再次引用文档：
When this event returns (or sets the returnValue property to) a value other than null or undefined, the user will be prompted to confirm the page unload.
See this other question Warn user before leaving web page with unsaved changes for more details.有关详细信息，请参阅其他问题Warn user before leaving web page with unsaved changes 。
解决方案3
1 2020-08-06 16:36:35
To prevent Scam, Browsers are cautios with those messages.为防止诈骗，浏览器会谨慎处理这些消息。 Most are very limited in what you can do.大多数人可以做的事情非常有限。 Chrome shows the standardized message "Leave Site? Changes that you made may not be saved." Chrome 显示标准化消息“离开网站？您所做的更改可能无法保存。” which is not changable afaik.这是不可改变的afaik。 To achieve this, simply use:为此，只需使用：
window.onbeforeunload = function () {
return true;
};
An alternative to that is to detect when the mouse is leaving the window. That is not the same, but often leaving the viewport is the action taken before closing a tab.另一种方法是检测鼠标何时离开 window。这是不一样的，但离开视口通常是在关闭选项卡之前采取的操作。 You can detect the event when the mouse leaves the window and trigger whatever message or pop up you like.您可以在鼠标离开 window 时检测到该事件并触发您喜欢的任何消息或弹出窗口。 I personally find that very annoying though.我个人觉得这很烦人。
解决方案4
0 2020-08-06 16:32:16
Tried to call browser tab close event when click on close tab icon in chrome browser but not working.I want to show alert message before close the browser tab.How do it?在 Chrome 浏览器中单击关闭选项卡图标时尝试调用浏览器选项卡关闭事件但无法正常工作。我想在关闭浏览器选项卡之前显示警报消息。怎么做？
Below code is not working:下面的代码不起作用：
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<script type="text/javascript">
window.onbeforeunload = function(evt) {
var message = "Are you sure?";
/* InternetExplorer/Firefox*/
var e = evt || window.event
e.returnValue = message
/* WebKit browser */
return message;
}
</script>
<body>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.