ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript でページの更新とブラウザの終了を区別するにはどうすればよいですか?

JavaScript でページの更新とブラウザの終了を区別するにはどうすればよいですか?

DDD
DDDオリジナル
2024-11-03 17:42:29411ブラウズ

How to Distinguish Between Page Refresh and Browser Closure in JavaScript?

ページの更新とブラウザの終了の識別

ONUNLOAD イベントをトリガーすると、ページの更新とブラウザの終了を区別することが難しくなります。この記事では、この問題の解決策を紹介します。

解決策

この解決策は、HTML5 のローカル ストレージとサーバー/クライアント AJAX 通信を利用します:

  1. ウィンドウ アンロード ハンドラー:

    • ウィンドウに onunload ハンドラーを登録します。
    • このハンドラーでは、ページのアンロードを示すローカル ストレージ フラグを設定します ( myUnloadEventFlag).
    • AJAX リクエストをサーバーに送信し、指定された遅延 (例: 5 秒) の後にユーザーの接続を切断するよう要求します
  2. 本体ロード ハンドラー:

    • ページ本体に onload ハンドラーを登録します。
    • このハンドラーでは、アンロード イベントのローカル ストレージ フラグを確認します。
    • 現在時刻とフラグの時刻の差が指定された遅延より小さい場合、ページはリロードされており、サーバーの切断要求はキャンセルされる必要があります。
    • それ以外の場合は、ブラウザが閉じられます。
  3. サーバー処理:

    • 切断要求のリストを維持します。
    • 定期的に検査するタイマーを実行します。
    • リクエストのタイムアウトが切れたら、ユーザーを切断します。
    • キャンセルリクエストを受信した場合は、対応する切断リクエストをリストから削除します。

このアプローチでは、アンロード イベントのタイミングを考慮して、タブ/ウィンドウの閉じとページのリロードを区別します。関連するページにイベント ハンドラーを配置することで、フォローされたリンクや送信されたフォームなどの他のイベントにも適用できます。

制限事項:

このソリューションには HTML5 ローカル ストレージのサポートが必要ですが、サポートされない場合があります。 MSIE7 などの古いブラウザでも動作します。

以上がJavaScript でページの更新とブラウザの終了を区別するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。