logo标签列表

页面刷新后，Chrome浏览器不会触发beforeunload事件。

javascriptgoogle-chrome
5
我有这个简单的代码 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="angular.min.js"></script>-->
    <script>       

        window.onload = function () {
            window.addEventListener("unload", function () {
                debugger;
            });
            window.addEventListener("beforeunload", function () {
                debugger;
            });
            window.onbeforeunload = function () {
               
            }
        }
    </script>
    
</head>
<body ng-app="app">   

</body>
</html>

我希望在刷新页面后仍然能触发unload或beforeunload事件。但是在Chrome版本67.0.3396.62中，这种情况没有发生。我已经尝试过Firefox和Edge，并且它们可以正常工作。只有在刷新页面时才会出现错误。

直到窗口加载完成之后，您才会添加事件。因此，请将您的eventListener从window.onload中移除。 - Ryan Wilson
我移除了window.onload。结果是一样的。 - elarmando
1
可能是Chrome版本的一个bug？？也许可以尝试在他们的论坛上发布。 - Ryan Wilson
1
我有完全相同的版本，这段代码片段对我来说运行良好。 - Sebastian Speitel
好的，那真的很奇怪 @RyanWilson。你是刷新了页面还是直接关闭了浏览器？ - elarmando
1
作为一种解决方法，您可以结合使用 window.onload 和 performance.navigation.type，并检查是否为 TYPE_RELOAD？ - Adelin
2个回答
8
你遇到了一个问题，这个问题已经被报告过了。看起来像是个bug，但是根据Chrome dev (kozy)的说法，这是一个功能:

感谢您的复现。实际上这是一个功能。当您按下重新加载按钮后，我们会忽略页面重新加载前的所有断点。当您有很多断点并且需要重新加载页面以重新开始调试会话时，这非常有用。

解决方法：不要按重新加载按钮，而是使用 omnibox 导航到相同的 URL，然后所有断点都将按预期工作。

我突出了 kozy 提出的解决方法。我尝试过了，发现它确实有效。

除了与debugger语句有关的问题外，处理程序在重新加载或关闭选项卡时都会被执行。在以下两种情况下，当返回true时，我收到Chrome提供的标准提示：
window.addEventListener("beforeunload", function (ev) {
  ev.returnValue = true; // `return true` won't work here.
});

这也可以运行：
window.onbeforeunload = function () {
  return true;
}

以前，您可以使用返回值和消息，浏览器将显示您的自定义消息，但现在大多数浏览器不再支持此功能。

是否要在load处理程序内设置beforeunload处理程序完全取决于您的目标。例如，我有一个用于编辑文档的应用程序，直到应用程序开始初始化（比load事件晚得多）才设置beforeunload处理程序。 beforeunload处理程序存在的目的是确保用户不会离开未保存修改的页面。

2
第一次是“它正在工作”还是“它没有工作”？ - Lover of Structure
第一次是“它正在运行”还是“它没有运行”？ - undefined
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接