ブラウザの「戻る」ボタンのクリックを正確に検出するにはどうすればよいですか?-jsチュートリアル-php.cn

ブラウザの「戻る」ボタンのクリックを正確に検出するにはどうすればよいですか?

Linda Hamilton

リリース： 2024-10-22 12:47:00

オリジナル

681 人が閲覧しました

How to Accurately Detect Back Button Clicks in Browsers?

精度を高めたブラウザの戻るボタンのクリックの検出

はじめに:

ブラウザの実装には戻るボタンのクリックの識別が不可欠ですナビゲーション履歴の追跡。さまざまなアプローチが存在しますが、本物の「戻る」ボタンのクリックと、同様のイベントをトリガーする他のブラウザーアクションを区別することが重要です。

背景:

一般的なアプローチの 1 つは、ウィンドウの使用です。 .onbeforeunload イベントリスナー。ユーザーがページを閉じようとしたり、ページから移動しようとしたときに起動されます。ただし、このイベントは、F5 キーを押す、ページをリロードするなどのアクションでもトリガーされ、誤検知が発生します。

解決策:

この問題に対処するには、より洗練された解決策が必要です。このソリューションは、history.pushState メソッドと window.onpopstate メソッドを活用し、ナビゲーション履歴をより詳細に制御します。

実装:

次のコードスニペットは実装を示しています。

<code class="js">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back (or forward) buttons here
            // Will NOT handle refresh, use onbeforeunload for this.
        };
    } else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Detect and redirect change here
                // Works in older Firefox and Internet Explorer 9
                // * it does mess with your hash symbol (anchor?) pound sign
                // delimiter on the end of the URL
            } else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

ログイン後にコピー

説明:

このコードは、history.pushState を使用して、ページをリロードせずにブラウザーの履歴を更新します。次に、ユーザーが戻るボタンまたは進むボタンをクリックするとトリガーされる window.onpopstate イベントにバインドします。

history.pushState をサポートするブラウザでは、このアプローチにより、リロードイベントを除いて、戻るボタンのクリックが正確に検出されます。古いブラウザの場合、コードはハッシュの変更に基づくフォールバックメソッドを使用するため、ポンド記号区切り文字の処理に若干の制限が生じます。

結論:

この強化されたアプローチにより、ブラウザーでの「戻る」ボタンのクリックを正確に検出し、window.onbeforeunload を単独で使用する場合の制限を排除します。ナビゲーション履歴を追跡し、ユーザーエクスペリエンスを向上させるための信頼できるソリューションを開発者に提供します。

以上がブラウザの「戻る」ボタンのクリックを正確に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。