使用 JavaScript 轻松检测用户何时离开页面的 3 种最佳方法

本文最初发表于webinuse.com。

有时我们需要检测用户何时离开网页或点击链接。有时我们会利用这些数据来更改网站上的某些内容，有时是为了发送分析数据，有时则仅仅是出于其他原因需要了解这些信息。

本文将介绍检测用户离开页面的三种最简便方法。遗憾的是，每种方法都存在一些缺陷，但也都有其适用的场景。

1. 在页面开始卸载之前检测退出

根据MDN 的描述：beforeunload当窗口、文档及其资源即将卸载时，会触发此事件。此时文档仍然可见，并且该事件仍然可以取消。

这意味着，当我们点击链接、关闭标签页、关闭浏览器或执行任何会从浏览器中删除当前链接的操作时，浏览器开始执行该操作之前的一瞬间会触发beforeunload事件。

假设我们点击了一个链接。在浏览器开始打开这个新链接之前，会触发该事件。

这个事件可以用来向后端发送一些数据，或者更改本地存储中的某些内容，或者做任何我们需要做的事情。

const beforeUnloadListener = (event) => {
    //Send something to back end
    fetch('uri')
};

window.addEventListener("beforeunload", beforeUnloadListener);

不过我们需要注意的是，这个事件并非总是触发，它存在一些问题。例如，它并非总能检测到用户何时离开网页，尤其是在移动设备上。有关问题和其他数据的更多信息，请访问MDN。

2. 使用页面隐藏事件检测用户何时离开网页

与此事件类似beforeunload，pagehide当用户离开当前页面时（例如点击后退按钮），会触发此事件。但是，根据MDN 的说法，beforeunload此pagehide事件并非总是可靠地触发。

const pageHideListener = (event) => {
    //Send something to back end
    fetch('uri')
};

window.addEventListener("pagehide", pageHideListener);

3. 可见性变更事件

检测用户何时离开网页最可靠的方法是使用visiblitychange事件。即使是切换标签页、最小化浏览器、在移动设备上从浏览器切换到其他应用等最细微的变化，都会触发此事件。有关此事件的更多信息，请参阅MDN。

这是将一些分析数据发送到我们后端的绝佳方法，如下例所示。

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

注意：此事件非常适合向后端发送分析数据及类似数据，但如果我们想发送用户是否仍然打开某个页面的信息，我们应该使用前两个事件，或者每隔几秒钟向用户发送一次 ping 请求。

如果您有任何问题或想了解更多信息，可以在我的 Twitter上找到我，或者您可以阅读我的其他文章，例如《关于 CSS 边框我们需要知道的一切》。