top-3-ways-to-easily-detect-when-a-user-leaves-a-page-using-javascript-2ce4

原始地址：https://dev.to/amersikira/top-3-ways-to-easily-detect-when-a-user-leaves-a-page-using-javascript-2ce4

‘’'这篇文章最初发布在webinuse.com上
有时我们需要检测用户何时离开网页或点击链接。有时我们会使用这些数据来改变网站上的某些内容，有时是为了发送分析数据，有时我们只是因为其他原因需要知道这些信息。
在本文中，我们将介绍检测用户离开页面的三种最简单的方法。不幸的是，这些方法中的每一种都有一些缺点，但也适用于一些情况。

点击查看

1. 在页面开始卸载前检测退出
   根据
   MDN的解释: 在窗口、文档及其资源即将卸载之前，将触发beforeunload事件。此时文档仍然可见，事件可以取消。
   这意味着当我们点击链接、关闭选项卡或浏览器，或者执行任何可能将当前链接从浏览器中移除的操作之前，浏览器将触发beforeunload事件。
   假设我们点击了某个链接。在浏览器开始打开这个新链接之前的一刹那，它将触发该事件。
   我们可以利用这个事件向后端发送一些数据，或者更改我们的localStorage，或者执行其他需要的操作。

const beforeUnloadListener = (event) => {
  //向后端发送数据
  fetch('uri')
};
window.addEventListener("beforeunload", beforeUnloadListener);

然而，我们需要牢记这个事件并不总是可靠的。它存在一些问题。它并不总是能够正确检测用户离开网页，特别是在移动设备上。关于问题和其他信息，我们可以访问
MDN。

点击查看
2. 使用pagehide事件检测用户离开网页
与beforeunload事件类似，当用户离开当前页面，比如点击返回按钮时，会触发pagehide事件。但是，根据
MDN的解释，与beforeunload事件一样，pagehide事件并不总是可靠的。

const pageHideListener = (event) => {
  //向后端发送数据
  fetch('uri')
};
window.addEventListener("pagehide", pageHideListener);

点击查看
3. visiblitychange事件
检测用户离开网页最可靠的方式是使用visiblitychange事件。此事件会触发最微小的变化，如切换标签、最小化浏览器、从浏览器切换到移动设备上的其他应用程序等。关于此事件的更多信息可以在
MDN上找到。
以下示例展示了通过此事件将一些分析数据发送给后端的方法。

document.onvisibilitychange = function() {
  if (document.visibilityState === 'hidden') {
    navigator.sendBeacon('/log', analyticsData);
  }
};

**注意：**此事件非常适合向后端发送分析和类似的数据，但如果我们想要发送信息以判断用户是否仍然打开了某个页面，我们应该使用前两个事件，或者每隔几秒向用户发送请求。
如果您有任何问题，或者想了解更多信息，可以在我的网站
Everything we need to know about CSS Borders上找到我。
‘’’