vue 监听浏览器页面关闭_监听浏览器关闭事件的解决方案

在web项目开发中，关于浏览器关闭事件有两个很常见的问题：为什么我没有监听浏览器关闭事件？ 我监听到了这个事件，但写在事件里的异步请求为什么发送不成功？

原因分析：这两个问题无外乎两个原因：浏览器关闭事件未被触发 和 异步请求发送失败。

原因1：关闭浏览器时一定会触发事件吗？如果不一定，那什么条件下才不触发呢？

与浏览器关闭事件相关事件有onunload和onbeforeunload两个。区别在于onbeforeunload在onunload之前执行，它还可以阻止onunload的执行。因此我们着重关注onbeforeunload事件。简单科普一下onbeforeunload事件。

当窗口即将被卸载(关闭)时,会触发该事件.此时页面文档依然可见,且该事件的默认动作可以被取消. 该函数应当返回一个字符串，当返回的字符串不为null或者undefined时，弹出确认窗口让用户自行选择是否关闭当前页面。一些浏览器将该事件返回的字符串显示在弹出窗上。

既然“当窗口即将被卸载(关闭)时,会触发该事件“，那也就是说只要我关闭快就一定会触发该事件喽？然而当关闭浏览器时，未必一定会触发onbeforeunload事件。MDN上关于这个事件的触发条件是这样描述的。

为避免意外弹出窗口，除非页面已与之交互，否则浏览器可能不会显示在beforeunload事件中创建的提示，甚至根本不会显示它们。

那什么时候算是非与之交互呢？这里举个例子，一个页面连着刷新两次，第二次刷新时，就认为非与之交互，就不会触发onbeforeunload事件。，同时对于触发条件，各个浏览器之间也存在差异。具体差异汇总表如下：