如何在用户关闭浏览器窗口之前可靠地发送 AJAX 请求并执行脚本？

在 JavaScript 中管理 AJAX 请求和脚本的窗口关闭

挑战

用户可以通过各种方法离开网页，包括关闭窗口或导航通过另一个 URL 离开。确定用户离开页面的时刻并触发相应操作可能具有挑战性。

解决方案

2024 年更新：

• Beacon API：Beacon API 在现代浏览器中提供了可靠的解决方案，确保请求完成即使用户离开页面。
• Visibilitychange 事件： 此事件捕获大多数浏览器中可观察到的最后一个状态更改，包括从被动状态到隐藏状态的转换。

实施

可见性更改事件：

document.addEventListener('visibilitychange', function() {
  if (document.visibilityState === "hidden") {
    // Trigger AJAX request or run script
  }
});

Beacon API：

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

navigator.sendBeacon(url, data);

详细信息

Beacon API 旨在即使用户离开页面。建议利用visibilitychange事件来检测用户何时退出页面，并在此时触发Beacon请求。

Lifecycle.js 库（适用于旧版浏览器）：

为了与旧版浏览器兼容，请考虑使用lifecycle.js库来管理页面

注意事项

• 广告拦截器：广告拦截器可能会阻止对某些跟踪域的 Beacon 请求。
• 跨站点请求： Beacon 请求遵循 CORS 限制并包含 cookie，因此请确保适当的配置跨域请求。

以上是如何在用户关闭浏览器窗口之前可靠地发送 AJAX 请求并执行脚本？的详细内容。更多信息请关注PHP中文网其他相关文章！