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

URL 変更時にイベントをトリガーする方法

window.location.href を定期的に変更する Web サイト用の Greasemonkey スクリプトを開発する場合、多くの場合、これらの URL の変更に応じて特定のアクションを実行する必要があります。ただし、潜在的な解決策としてポーリングやタイムアウトを利用するのは非効率的になる可能性があります。

このような問題を回避するために、MutationObserver API を利用する非常に効果的な方法を紹介します。 body 要素内の変更を監視することで、このスクリプトは URL の変更を効果的に検出し、変更されたドキュメントの DOM へのアクセスを提供します。

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;
            /* Insert your code here */
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};

あるいは、より簡潔で最新のアプローチを希望する場合は、次のコードを使用できます。最新の 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;
      /* Insert your code here */
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;

このメソッドを使用すると、URL が変更されたときにトリガーされるイベントに必要な機能を付加し、変更されたドキュメントの DOM へのアクセスを提供できます。

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