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

Barbara Streisand
リリース: 2024-10-30 09:45:02
オリジナル
528 人が閲覧しました

How can I Detect and Handle Navigation Changes in a Webpage Using JavaScript?

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

ユーザーが 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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!