刷新页面Chrome后不会触发Beforeunload事件 [英] Beforeunload event does not fire after page refresh Chrome

查看:277
本文介绍了刷新页面Chrome后不会触发Beforeunload事件的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我有这个简单的代码

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

我希望在刷新页面后触发卸载或beforeunload事件.ChromeVersión67.0.3396.62中没有发生这种情况.我已经尝试过Firefox和Edge,并且效果很好.当我关闭标签页时,它也可以工作.仅当我刷新页面时才会发生该错误.

I want unload or beforeunload events be fired after I refresh the page. This is not happening in Chrome Versión 67.0.3396.62. I have tried firefox and edge and it works well. It also works when i close the tab. The error ocurrs only when i refresh the page.

推荐答案

您遇到了 Chrome开发者() 这是一个功能:

You've run into an issue that was already reported. It looks like a bug, but according to a Chrome dev (kozy) it is a feature:

感谢您的支持.它实际上是功能.按下重新加载后,我们将在重新加载页面之前忽略所有断点.当您有很多断点并且需要重新加载页面以重新启动调试会话时,此功能始终非常有用.

Thanks for repro. It is actually feature. As soon as you pressed reload we ignore all breakpoints before page reloaded. It is useful all the time when you have a lot of breakpoints and need to reload page to restart debugging session.

解决方法:您可以使用多功能框导航到相同的网址,而无需按重新加载按钮,然后所有断点将按预期工作.

我已经大胆地强调了kozy提出的解决方法.我尝试过,发现它可以工作.

I've added bold emphasis to point out the workaround proposed by kozy. I've tried it and found that it works.

除了 debugger 语句出现问题外,无论您是重新加载还是关闭选项卡,都将执行处理程序.在以下两种情况下,当返回true时,我都会得到Chrome提供的库存提示:

Other than the issue with the debugger statement, the handlers are executed whether you are reloading or closing the tab. In both cases that follow, I get the stock prompt that Chrome provides when returning true:

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

这也可行:

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

过去,您可以在消息中使用返回值,并且浏览器会显示您的自定义消息,但浏览器通常不再支持此功能.

It used to be that you could use a return value with a message and the browser would show your custom message but browsers generally no longer support this.

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

Whether or not you want to set the handler for beforeunload inside a handler for load is entirely dependent on your goals. For instance, I have an application for editing documents that does not set the beforeunload handler until the application has started initializing, which is much later than the load event. The beforeunload handler is there to make sure the user does not leave the page with unsaved modifications.

这篇关于刷新页面Chrome后不会触发Beforeunload事件的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆