JavaScript でハッシュ記号以降の URL の変更を検出するにはどうすればよいですか?-jsチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-11-12 12:54:02

オリジナル

656 人が閲覧しました

How to Detect URL Changes After the Hash Symbol in JavaScript?

ハッシュシンボル後の 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 サイトの他の関連記事を参照してください。