ユーザーがブラウザ ウィンドウを閉じる前に、AJAX リクエストを確実に送信し、スクリプトを実行するにはどうすればよいですか?

JavaScript での AJAX リクエストとスクリプトのウィンドウ終了の管理

チャレンジ

ユーザーは、ウィンドウを閉じる、移動するなど、さまざまな方法で Web ページから離れることができます。別の URL 経由でアクセスできます。ユーザーがページを離れた瞬間を判断し、対応するアクションをトリガーすることは困難な場合があります。

解決策

2024 年更新:

• Beacon API: Beacon API は最新のブラウザで信頼性の高いソリューションを提供し、ユーザーがページを離れてもリクエストは完了します。
• Visibilitychange イベント: このイベントは、パッシブ状態から非表示状態への遷移など、ほとんどのブラウザーで観察可能な最後の状態変化をキャプチャします。

実装

可視性の変更イベント:

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

ビーコン API:

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

navigator.sendBeacon(url, data);

詳細

ビーコン API は、ユーザーがページを離れます。ユーザーがページを終了したことを検出し、その時点でビーコン リクエストをトリガーするには、visibilitychange イベントを利用することをお勧めします。

Lifecycle.js ライブラリ (古いブラウザ用):

古いブラウザとの互換性を確保するには、lifecycle.js ライブラリを使用してページを管理することを検討してください。 lifecycle.

考慮事項

• 広告ブロッカー: 広告ブロッカーは、特定の追跡ドメインへのビーコン リクエストをブロックする場合があります。
• クロスサイト リクエスト: ビーコンリクエストは CORS 制限に従い、Cookie が含まれるため、クロスオリジンに適切な構成を確保してください。リクエスト。

以上がユーザーがブラウザ ウィンドウを閉じる前に、AJAX リクエストを確実に送信し、スクリプトを実行するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。