JavaScript でウィンドウを閉じるイベントを確実にキャプチャし、アクションを実行するにはどうすればよいですか?

JavaScript でのウィンドウ終了イベントのキャプチャとアクションの実行

ユーザーが特定のページから離れたとき、特にウィンドウを閉じるときの判断は困難な場合があります。このイベントをキャプチャしてアクションを実行する方法は次のとおりです。

最新のブラウザ (2024 以降)

Beacon API は、ウィンドウ終了イベントをキャプチャするためのソリューションを提供します。ビーコン リクエストは、ユーザーがページを終了しても完了するように設計されており、信頼性の高いデータ収集が保証されます。

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 ライブラリの使用を検討してください。 events:

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 中国語 Web サイトの他の関連記事を参照してください。