时间戳

首页 > 解决方案 > Javascript：onbeforeunload 何时触发？

javascript - Javascript：onbeforeunload 何时触发？

问题描述

我正在向我的网站添加“确认您要离开”对话框，并且正在经历该onbeforeunload事件的奇怪行为。

文档非常清楚：如果您的页面即将被卸载，则会调用此事件。当您的 eventHandler 返回一个字符串时，会要求用户确认。根据浏览器的不同，字符串可能会显示给他。

但是在一个小型示例网站中，我注意到beforeunload只有当用户以某种方式与网站交互时才会真正触发它。这是我的测试设置：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js">
    </script>
    <script type="text/javascript">
        window.onload = function () {
            $("#placeholder").text("website loaded")
            window.onbeforeunload = function () {
                return "Reloading the page will reset the survey!";
            }
        }
    </script>
</head>

<body>
    <p id='placeholder'></p>
</body>

</html>

加载窗口时，更改段落文本并beforeunload注册事件处理程序。如果我在 Firefox 中加载它，该段落会立即更改。

但是，如果我关闭选项卡或重新加载它，则不会要求确认。只有在我点击了网站时才会显示确认对话框。来回切换标签是不够的，等待 ca 10s 是不够的。

chrome 中的行为是相同的。

一旦我点击了网站，总是会要求确认。我可以让另一个选项卡聚焦并关闭此示例（通过右键单击和“关闭选项卡”），它要求确认。或者另一个选项卡被聚焦，我尝试关闭浏览器，它要求确认。

这里发生了什么，如何确保在卸载站点之前始终触发事件？

这是一个视频： 在此处输入图像描述

标签： javascripthtmldomdom-events

解决方案

事件触发，但可能不会显示确认。来自MDN：

注意：为了防止不需要的弹出窗口，浏览器可能不会显示在 beforeunload 事件处理程序中创建的提示，除非该页面已经与之交互，或者甚至可能根本不显示它们。

推荐阅读