ブラウザのリロードを妨げずにブラウザでのユーザーの「戻る」ボタンのクリックを検出する方法

ブラウザでのユーザーの戻るボタンのクリックを検出する

戻るボタンのクリックを検出しようとする場合、開発者は多くの場合 window.onbeforeunload イベント リスナーに依存します。ただし、このイベントは戻るボタンのクリックだけでなくブラウザのリロードでもトリガーされるため、誤解を招く可能性があります。

ブラウザのリロード干渉を伴わない戻るボタンのクリックの検出

の処理誤検知なしで戻るボタンのクリックを確認するには、カスタマイズされたアプローチの使用を検討してください:

1. 履歴の変更:

   • ページの読み込み時に、 History.pushState API が利用可能です。
   • サポートされている場合は、history.pushState を使用してランダムな状態を履歴にプッシュします。
   • 戻るボタンと進むボタンの遷移を処理するために onpopstate イベント リスナーを定義します。

2. ハッシュベースのアプローチ:

   • history.pushState がサポートされていない場合は、ハッシュ変更イベント (window.onhashchange) を使用します。 .
   • 初期ハッシュ値を設定し、ハッシュ変更時にランダムでないハッシュ値をチェックします。
   • フラグを使用して、ユーザーが開始したハッシュ変更のみが「戻る」ボタン ロジックをトリガーするようにします。ブラウザのリロードを無視します。

実装

<code class="javascript">window.onload = function () {
    if (typeof history.pushState === "function") {
        history.pushState("jibberish", null, null);
        window.onpopstate = function () {
            history.pushState('newjibberish', null, null);
            // Handle back button click here
        };
    }
    else {
        var ignoreHashChange = true;
        window.onhashchange = function () {
            if (!ignoreHashChange) {
                ignoreHashChange = true;
                window.location.hash = Math.random();
                // Handle back button click here
            }
            else {
                ignoreHashChange = false;
            }
        };
    }
}</code>

互換性

このアプローチChrome と Firefox で効果的に動作することが報告されています。

以上がブラウザのリロードを妨げずにブラウザでのユーザーの「戻る」ボタンのクリックを検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。