JavaScript で URL の変更を確実に検出するにはどうすればよいですか?

JavaScript での URL 変更の検出

JavaScript で URL の変更を追跡するには、信頼できる方法を特定することが重要です。 onload イベントは適切ではありませんが、実行可能なオプションがいくつかあります。

1.ハッシュ変更イベント:

このイベントは、# 記号の後の URL 部分が変更された場合にのみトリガーされます。ハッシュ関連の変更に限定されます。

2. Popstate イベント:

このイベントは、ブラウザーの履歴ナビゲーション ボタン (戻る、進むなど) が使用されたとき、または PushState メソッドまたは replaceState メソッドによって URL が変更されたときに発生します。ただし、すべての場合に機能するとは限りません。

3.カスタム Locationchange イベント (推奨):

包括的な URL 変更検出を確実にするために、カスタム イベント リスナー「locationchange」を実装できます。これには、すべての履歴状態変更 (つまり、pushState、replaceState、popstate) に対してカスタム イベントをトリガーするように履歴オブジェクトを変更することが含まれます。

実装:

// Create a custom locationchange event
window.addEventListener('locationchange', () => {
    console.log('Location changed!');
});

// Modify history object to trigger custom events
(() => {
    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'));
    });
})();

このカスタム イベントを使用すると、ハッシュ、pushState、replaceState のいずれによって発生したかに関係なく、URL の変更を効果的に検出できます。この方法は、JavaScript アプリケーションで URL の変更を監視するための包括的なソリューションを提供します。

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