监听页面关闭

[louzhedong]

存在这样一个场景，我们需要在用户离开页面时，做一些处理操作，比如提示用户是否关闭页面，或者进行数据埋点，本文主要记录一下用户退出行为时的数据上报

1.事件监听

在浏览器中有两个事件可以监听到页面的关闭，即beforeunload和unload

1. beforeunload

   beforeunload在网页将要关闭时调用，此时网页还是可见的，而且此事件也可以被用户取消

   window.addEventListener("beforeunload", (event) => {
     event.preventDefault();
     event.returnValue = "";
   })

   上述写法可以使用户在刷新或者关闭浏览器时有个弹窗提醒用户是否关闭

2. unload

   unload在网页正在被卸载时调用，此时所有资源仍然存在，但对于用户不可见，界面也无法交互，并且错误不会停止卸载文档的过程

2.上报请求

如果我们在监听事件中发送ajax来上报数据，请求会被浏览器abort。因为在页面卸载的时候，浏览器并不能保证异步的请求能够成功

对于这个行为，我们可以使用下面的方式

1. 发送同步ajax

   此种方式用户需要等待请求结束才可以关闭页面，会影响用户体验

2. 发送异步ajax，但在服务端忽略ajax的abort

   此种方式需要后台进行改造，成本太大

3. 使用navigator.sendBeacon发送异步请求

   该方法的定义

   这个方法主要用于满足 统计和诊断代码 的需要，这些代码通常尝试在卸载（unload）文档之前向web服务器发送数据。过早的发送数据可能导致错过收集数据的机会。然而， 对于开发者来说保证在文档卸载期间发送数据一直是一个困难。因为用户代理通常会忽略在卸载事件处理器中产生的异步 XMLHttpRequest 。

   使用方式

   navigator.sendBeason(url [,data]);

   其中data可以是 ArrayBufferView、Blob、DOMString、FormData等类型