如何在使用者關閉瀏覽器視窗之前可靠地發送 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中文網其他相關文章！