如何在 JavaScript 中可靠地捕獲視窗關閉事件並執行操作？

捕獲視窗關閉事件並在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中文網其他相關文章！