JavaScript でハッシュ記号以降の URL の変更を検出するにはどうすればよいですか?

ハッシュ シンボル後の JavaScript での URL 変更の検出

JavaScript には、次のオプションを含む、URL が変更されたかどうかを検出する方法が用意されています。

• Onload イベント:

  • ハッシュ記号の後に URL が変更された場合、onload イベントはトリガーされません。

• URL のイベント ハンドラー:

  • URL の変更を検出するためだけに組み込まれたイベント ハンドラーはありません。

• URL を毎秒チェックする:

  • URL を毎秒常にチェックすることは機能するかもしれませんが、非効率的であり、パフォーマンスの問題につながる可能性があります。

Navigation API の使用 (最新のブラウザ向け)

主要なブラウザは、URL の変更をより効率的に検出する方法を提供する Navigation API をサポートするようになりました。 :

window.navigation.addEventListener("navigate", (event) => {
    console.log("location changed!");
});

古いブラウザ用のカスタム イベント

ナビゲーション API を持たない古いブラウザの場合、履歴オブジェクトを変更することでカスタム イベント リスナーを作成できます:

(() => {
    let oldPushState = history.pushState;
    history.pushState = function pushState() {
        let ret = oldPushState.apply(this, arguments);
        window.dispatchEvent(new Event("pushstate"));
        window.dispatchEvent(new Event("locationchange"));
        return ret;
    };

    let oldReplaceState = history.replaceState;
    history.replaceState = function replaceState() {
        let ret = oldReplaceState.apply(this, arguments);
        window.dispatchEvent(new Event("replacestate"));
        window.dispatchEvent(new Event("locationchange"));
        return ret;
    };

    window.addEventListener("popstate", () => {
        window.dispatchEvent(new Event("locationchange"));
    });
})();

これで、「locationchange」イベントを使用して URL の変更をリッスンできます:

window.addEventListener("locationchange", function () {
    console.log("location changed!");
});

以上がJavaScript でハッシュ記号以降の URL の変更を検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。