JavaScript、浏览器和窗口关闭：跟踪用户离开

跟踪用户离开对于在用户离开之前捕获数据和执行操作至关重要一页。虽然监视导航事件相对简单，但在没有用户交互的情况下检测窗口关闭或 URL 更改构成了挑战。

捕获窗口关闭事件

Beacon API，在现代中可用浏览器，提供了解决方案。 Beacon 请求的设计目的是，即使用户突然离开页面，也能执行关键操作。

要利用 Beacon API，请使用以下代码片段：

var url = "https://example.com/foo";
var data = "bar";

navigator.sendBeacon(url, data);

旧版浏览器的替代方案

如果需要支持旧版浏览器，则visibilitychange事件提供后备。在这种情况下，从“被动”到“隐藏”的转变意味着用户即将离开。这是一个示例：

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Perform desired actions (e.g., send beacon request)
  }
});

可靠性和广告拦截器

Visibilitychange 已成为现代浏览器中用户退出的可靠指标。但是，广告拦截器可能会干扰信标请求，尤其是跨源或源自已知跟踪域的情况。

跨站点注意事项

信标请求是尊重的 POST 请求CORS 限制。发出跨站请求时，请确保它们满足必要的要求，以避免被浏览器阻止。