如何在 JavaScript 中可靠地捕获窗口关闭事件并执行操作？-js教程-PHP中文网

如何在 JavaScript 中可靠地捕获窗口关闭事件并执行操作？

Barbara Streisand

发布： 2024-11-25 19:10:14

原创

949 人浏览过

How Can I Reliably Capture Window Close Events in JavaScript and Execute Actions?

捕获窗口关闭事件并在 JavaScript 中执行操作

确定用户何时离开指定页面，特别是通过窗口关闭，可能具有挑战性。以下是如何捕获此事件并执行操作：

现代浏览器（2024 年及以后）

Beacon API 提供了捕获窗口关闭事件的解决方案。 Beacon 请求设计为即使在用户退出页面时也能完成，从而确保可靠的数据收集：

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

navigator.sendBeacon(url, data);

登录后复制

事件监控

如果需要在以下位置发起请求最后一刻，监听visibilitychange事件。当页面可见性从活动变为隐藏时触发此事件，表明用户可能已离开页面：

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Send beacon request
  }
});

登录后复制

旧版浏览器支持

为了向后兼容，考虑使用lifecycle.js库来管理页面生命周期事件：

lifecycle.addEventListener('statechange', function(event) {
  if (event.originalEvent == 'visibilitychange' && event.newState == 'hidden') {
    var url = "https://example.com/foo";
    var data = "bar";

    navigator.sendBeacon(url, data);
  }
});

登录后复制

注意： 广告拦截器可能会干扰 sendBeacon 请求。考虑使用同源请求或避免通用跟踪 URL。

以上是如何在 JavaScript 中可靠地捕获窗口关闭事件并执行操作？的详细内容。更多信息请关注PHP中文网其他相关文章！