Question

我有这个简单的代码

<!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事件。这在ChromeVersión67.0.3396.62中不会发生。我尝试过firefox和edge，效果很好。当我关闭标签时它也有效。只有当我刷新页面时才会出现错误。

Answer 1

您已遇到已报告的issue。它看起来像一个错误，但根据Chrome dev (kozy) 这是一个功能：

感谢repro。它实际上是功能。一旦按下重新加载，我们会在重新加载页面之前忽略所有断点。当你有很多断点并且需要重新加载页面以重新启动调试会话时，它总是很有用。

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

我已经大胆强调指出kozy提出的解决方法。我已经尝试过，发现它有效。

除debugger语句的问题外，无论是重新加载还是关闭选项卡，都会执行处理程序。在接下来的两种情况下，我都会在返回true时获得Chrome提供的库存提示：

window.addEventListener("beforeunload", function (ev) {
  ev.returnValue = true; // `return true` won't work here.
});

这也有效：

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

过去，您可以使用带有消息的返回值，浏览器会显示您的自定义消息，但浏览器通常不再支持此消息。

是否要在beforeunload的处理程序中为load设置处理程序完全取决于您的目标。例如，我有一个编辑文档的应用程序，它不会在应用程序开始初始化之前设置beforeunload处理程序，这比load事件要晚得多。 beforeunload处理程序用于确保用户不会使页面保留未保存的修改。

页面刷新Chrome后，不会触发Beforeunload事件

1 个答案: