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

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

GitHub などの AJAX ベースの Web サイトを操作する場合、URL が変更されたかどうかを判断することができます。重要な。 JavaScript では、さまざまな方法で URL の変更を監視できます。

URL の変更を検出するためのオプション:

• onload イベント: このイベントはのみ発生しますページが完全にリロードされるため、部分的な URL の検出には適していません。
• URL イベント ハンドラー: JavaScript は URL 変更用の直接イベント ハンドラーを提供しません。
• 定期的な URL チェック: URL を継続的にチェックします。毎秒リソースを大量に消費する可能性があり、実用的ではありません。

改善された方法: Navigation API (2024)

最新のブラウザでは、URL の変更をより効率的に検出する方法を提供する Navigation API がサポートされるようになりました。その仕組みは次のとおりです。

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

代替メソッド (ナビゲーション前 API)

ナビゲーション API が利用できない場合は、次のコード:

(function () {
    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'));
    });
})();

このソリューションは履歴オブジェクトを変更して機能を追加し、カスタム イベントの作成を可能にします。リスナー、たとえば:

window.addEventListener('locationchange', () => {
    console.log('location changed!');
});

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