ブラウザの更新とウィンドウの閉じを区別するにはどうすればよいですか?

ブラウザの更新アクションとブラウザを閉じるアクションの区別

ページの更新とブラウザの終了の区別を判断するのは、両方のアクションがトリガーとなるため、難しいように思えるかもしれません。 ONUNLOAD イベント。ただし、この難問には解決策があります。

解決策:

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

1. ONUNLOAD ハンドラー: ページ上で、疑似 JavaScript を使用してウィンドウにオンアンロード ハンドラーを追加します:

   <code class="javascript">function myUnload(event) {
       if (window.localStorage) {
           window.localStorage['myUnloadEventFlag'] = new Date().getTime();
       }
       askServerToDisconnectUserInAFewSeconds(); // Synchronous AJAX call
   }</code>

   この関数:

   • ローカル ストレージにアンロード中としてページにフラグを立てます。
   • 数秒以内にユーザーを切断するようサーバーに非同期的に通知します。

2. ONLOAD ハンドラー: 本体に、オンロード ハンドラーを追加します:

   <code class="javascript">function myLoad(event) {
       if (window.localStorage) {
           var t0 = Number(window.localStorage['myUnloadEventFlag']);
           if (isNaN(t0)) t0 = 0;
           var t1 = new Date().getTime();
           var duration = t1 - t0;
           if (duration < 10 * 1000) {
               // Browser reload
               askServerToCancelDisconnectionRequest(); // Asynchronous AJAX call
           } else {
               // Tab/window close
               // Perform desired actions (e.g., do nothing)
           }
       }
   }</code>

   この関数:

   • 前のアンロード イベントからの時間差を確認します。
   • 10 秒未満が経過した場合は、ブラウザのリロードです。
   • 10 秒を超えた場合は、タブ/ウィンドウが閉じられます。
3. サーバーの対話: サーバー上で切断要求のリストを維持し、タイマー スレッドを使用してリストを検査します。タイムアウト (例: 5 秒) 後に切断リクエストを処理し、受信した場合はキャンセルを処理します。

このソリューションは、タブ/ウィンドウの閉じ、リロード アクション、フォローしたリンク、送信されたフォームを区別するために機能します。 HTML5 ローカル ストレージをサポートするブラウザに適用できます。ただし、アンロード イベントに依存しているため、MSIE7 などの古いブラウザとは互換性がない可能性があることに注意してください。

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