JavaScript を使用して Web ページ内のナビゲーションの変更を検出して処理するにはどうすればよいですか?

イベント リスナーによるナビゲーション変更の処理

ユーザーが Web ページ内の新しい URL に移動すると、イベントをキャプチャすることが困難になる場合があります新しくロードされたページの DOM にアクセスします。これに対処するために、JavaScript の強力なオブザーバー API を使用したソリューションを検討します。

DOM 変異の監視
タイムアウトやポーリングに依存する代わりに、MutationObserver を利用して変更を監視できます。 DOM ツリー。 を観察することによって、

実装例
これは、ウィンドウを監視するための MutationObserver の使用を示すコード スニペットです。 .location.href の変更点:

<code class="javascript">var oldHref = document.location.href;

window.onload = function() {
    var bodyList = document.querySelector('body');

    var observer = new MutationObserver(function(mutations) {
        if (oldHref != document.location.href) {
            oldHref = document.location.href;
            /* Changed ! your code here */
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};</code>

最新の JavaScript 仕様
最新の JavaScript では、アロー関数と若干簡略化された構文を使用して同じ機能を実現できます:

<code class="javascript">const observeUrlChange = () => {
  let oldHref = document.location.href;
  const body = document.querySelector('body');
  const observer = new MutationObserver(mutations => {
    if (oldHref !== document.location.href) {
      oldHref = document.location.href;
      /* Changed ! your code here */
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;</code>

このイベント駆動型のアプローチを使用すると、ポーリングやタイムアウトを回避し、パフォーマンスが高く信頼性の高い方法で URL の変更をキャプチャできます。これにより、ユーザーが同じ Web ページ内を移動するたびに、新しく読み込まれたページの DOM にアクセスし、必要なアクションを実行できるようになります。

以上がJavaScript を使用して Web ページ内のナビゲーションの変更を検出して処理するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。