logo标签列表

如何在JavaScript中检测浏览器选项卡关闭事件

javascript
3

在 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>
1
这回答你的问题吗？检测浏览器或选项卡关闭 - Umutambyi Gad
3个回答
2
在某些浏览器中，在此事件期间调用window.alert()、window.confirm()和window.prompt()可能会被忽略。详见HTML规范获取更多细节信息。

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

尝试使用console.log并在控制台中勾选“保存日志”。您会发现，在您的情况下，只有alert()无法工作。
1
您实际上已经正确检测到了选项卡关闭事件！问题在于您的触发操作。来自相关MDN文档：
为了防止不必要的弹出窗口，一些浏览器不会显示在beforeunload事件处理程序中创建的提示，除非页面已经进行了交互。此外，有些根本不显示它们。
这意味着在关闭浏览器选项卡之前显示警报消息将非常困难，正如您所说的那样。但是，您可以通过在处理程序上使用return值来实现类似的功能。再次引用文档：
当此事件返回（或将returnValue属性设置为）null或undefined以外的值时，将提示用户确认页面卸载。在旧版浏览器中，此对话框中显示事件的返回值。从Firefox 44、Chrome 51、Opera 38和Safari 9.1开始，将显示一个不受网页控制的通用字符串，而不是返回的字符串。

查看这个问题在用户离开未保存更改的网页之前警告用户以获取更多详细信息。

1
为了防止诈骗，浏览器对这些消息非常谨慎。大多数浏览器的功能都非常有限。Chrome 显示标准化的消息 "离开此页面？您所做的更改可能未保存"，据我所知无法更改。要实现这一点，只需使用：
  window.onbeforeunload = function () {
        return true;
    };

另一种替代方法是检测鼠标何时离开窗口。虽然不完全相同，但通常在关闭选项卡之前会离开视口。您可以检测鼠标离开窗口的事件，并触发您喜欢的任何消息或弹出窗口。不过，我个人认为那非常令人烦恼。

这是不正确的。您可以在窗口关闭确认中显示自定义文本。 - MadPapo
2
据我所知，这并不适用于所有浏览器，你有在Chrome中运行的示例吗？如果有的话，我将删除我的答案，并很高兴学到了新东西。 - Valentin PKStore
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接