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

イベント リスナーを使用して JavaScript の URL 変更を検出する方法

URL 変更の監視は、多くの JavaScript アプリケーション、特に AJAX と単一のアプリケーションを利用するアプリケーションにとって重要です。 -ページのアーキテクチャ。この記事では、URL の変更を検出するために利用できるさまざまな方法を調査し、最も効果的なアプローチを検討します。

URL 変更のイベント ハンドラー

複数のイベント ハンドラーがあります。これは、JavaScript での URL の変更を追跡するために利用できます。最も一般的なものは次のとおりです。

• 'hashchange' イベント: URL の '#' 記号に続く部分の変更を監視します。
• 'popstate' イベント: ブラウザの「戻る」または「進む」ボタンが使用されたとき、または履歴オブジェクトが変更されたときにアクティブ化されます (例:

これらのイベント ハンドラーは、URL の変更を検出する信頼性の高い方法を提供しますが、制限があります。 「hashchange」イベントは、「#」の後のフラグメントが変更された場合にのみトリガーされますが、「popstate」イベントは常に確実に起動するとは限りません。

包括的な URL モニタリングのカスタム イベント

既存のイベント ハンドラーの制限を克服するために、すべての URL 変更を監視するカスタム イベントを作成できます。履歴オブジェクトを変更することで、pushState、replaceState、または Popstate イベントを通じて URL が更新されるたびにカスタム 'locationchange' イベントが確実に発生するようにできます。

カスタム イベントを実装するコードは次のとおりです。

(() => {
    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 の変更を検出できるようになりました。

結論

イベント ハンドラーの利用またはカスタム イベントの実装は、JavaScript で URL の変更を監視する効果的な方法を提供します。各アプローチには独自の利点と制限があります。これらのオプションを理解し、特定の要件に基づいて最適なアプローチを選択することで、開発者はアプリケーションが URL の変更に効果的に対応できるようになります。

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