如何在javascript中检测浏览器标签关闭事件答案

【问题标题】：How to detect browser tab close event in javascript如何在javascript中检测浏览器标签关闭事件
【发布时间】：2020-08-06 16:24:18
【问题描述】：

点击chrome浏览器中的关闭标签图标时尝试调用浏览器标签关闭事件但不起作用。我想在关闭浏览器标签之前显示警报消息。怎么做？

以下代码不起作用：

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

【问题讨论】：

这能回答你的问题吗？ Detect browser or tab closing

标签： javascript

【解决方案1】：

您实际上正确地检测到了标签关闭事件！问题在于您触发的操作。来自the relevant MDN documentation：

为了防止不需要的弹出窗口，某些浏览器不会显示在beforeunload 事件处理程序中创建的提示，除非页面已与之交互。此外，有些根本不显示它们。

这意味着您很难在关闭浏览器选项卡之前显示警告消息，如您所说的那样。但是，您可以通过在处理程序上使用 return 值来实现类似的效果。再次引用文档：

当此事件返回（或将 returnValue 属性设置为）非 null 或 undefined 的值时，将提示用户确认页面卸载。在旧浏览器中，事件的返回值显示在此对话框中。从 Firefox 44、Chrome 51、Opera 38 和 Safari 9.1 开始，将显示不受网页控制的通用字符串，而不是返回的字符串。

有关更多详细信息，请参阅其他问题Warn user before leaving web page with unsaved changes。

【讨论】：

【解决方案2】：

在某些浏览器中，调用 window.alert()、window.confirm() 和 window.prompt() 在此事件期间可能会被忽略。见 HTML 详细说明。

https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

尝试使用 console.log 并在控制台中检查“保留日志”。你会发现它只是 alert() 在你的情况下不起作用

【讨论】：

【解决方案3】：

为防止诈骗，浏览器会谨慎处理这些消息。大多数人的能力非常有限。 Chrome 显示标准化消息“离开站点？您所做的更改可能无法保存。”这是不可改变的。为此，只需使用：

  window.onbeforeunload = function () {
        return true;
    };

另一种方法是检测鼠标何时离开窗口。这不一样，但通常离开视口是在关闭选项卡之前执行的操作。您可以在鼠标离开窗口时检测到事件并触发您喜欢的任何消息或弹出窗口。不过我个人觉得这很烦人。

【讨论】：

这不是真的。您可以在窗口关闭确认中显示自定义文本。
这对所有浏览器都不正确 afaik，你有一个适用于 chrome 的例子吗？如果是这样，我将删除我的答案并很高兴学到新东西