如何可靠地检测用户何时关闭浏览器选项卡或离开我的网页？

在 JavaScript 中捕获窗口关闭事件

识别用户页面放弃对于 Web 分析至关重要。本文探讨了检测用户何时关闭浏览器选项卡或离开特定页面的技术。

Window.close 事件

之前的 window.close 事件提供了一种跟踪窗口关闭情况的可靠方法。然而，页面生命周期管理的变化使得该事件的可靠性降低。

Visibilitychange 事件

对于现代浏览器，visibilitychange 事件可以更准确地表示用户何时退出一页。当页面的可见性状态从可见转换为隐藏时，会触发此事件。

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Perform actions on page exit
  }
});

Beacon API

要获得全面的跨浏览器支持，请考虑使用 Beacon API。信标请求设计为即使在用户离开页面时也能完成，从而确保会话和分析的数据捕获。

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

navigator.sendBeacon(url, data);

Lifecycle.js 库

与对于旧版浏览器，lifecycle.js 库提供了额外的支持。它实现了页面生命周期的最佳实践，确保可靠的事件处理。

lifecycle.addEventListener('statechange', function(event) {
  if (event.originalEvent === 'visibilitychange' && event.newState === 'hidden') {
    navigator.sendBeacon(url, data);
  }
});

注意事项

• 广告拦截器：某些广告拦截器可能阻止 sendBeacon 请求到某些域。
• 跨站点请求： Beacon 请求受 CORS 限制。

以上是如何可靠地检测用户何时关闭浏览器选项卡或离开我的网页？的详细内容。更多信息请关注PHP中文网其他相关文章！