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

JavaScript でのハッシュを使用した URL 変更の検出

ハッシュ記号以降を含む URL の変更の監視は、AJAX を使用するアプリケーションにとって不可欠ですページ更新用。 JavaScript には、URL の変更を追跡するためのいくつかのオプションが用意されています。

イベント ハンドラー

JavaScript は、URL の変更を検出するために使用できるイベント ハンドラーを提供します。

• onload: このイベントは、最初のページ後の URL 変更の検出には適していませんload.
• hashchange: このイベントは、ハッシュ記号の後の部分が変更された場合にのみトリガーされますが、他の URL 変更の場合はトリガーされません。

手動チェックURL

URL を定期的にポーリングすることは、粗雑ではありますが信頼できるアプローチです。変化を検出しています。ただし、継続的なタイマーが必要であり、計算コストが高くなります。

拡張履歴 API

最新のブラウザは、専用の「ナビゲート」イベントを提供するナビゲーション API をサポートしています。このイベントは、原因 (pushState、replaceState、ハッシュの変更など) に関係なく、場所が変更されるたびに発生します。

レガシー ブラウザ用のポリフィル

そうでないブラウザの場合Navigation 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'));
    });
})();

This変更により、すべての履歴操作 (pushState、replaceState、popstate) をトリガーするカスタムの「locationchange」イベントが追加され、URL の変更を検出するためにイベント リスナーをアタッチできるようになります。

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