Greasemonkey スクリプトで MutationObserver を使用して「location.href」の変更を検出する方法

Location.href 変更イベントをリッスンする

Greasemonkey スクリプトを作成する場合、Web サイトが location.href を変更するときに特定の操作を実行する必要がある場合があります。 。この記事では、時間のかかるタイムアウトやポーリングの代わりに DOM 変異オブザーバーを使用して、この変更に対応する方法について説明します。

解決策

<code class="js">window.onload = function() {
    var bodyList = document.querySelector('body');

    var observer = new MutationObserver(function(mutations) {
        if (oldHref != document.location.href) {
            oldHref = document.location.href;
            // 执行相关的操作
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};</code>

このスクリプトは、DOM 変異オブザーバーを使用して、body 要素内の変更を含むドキュメント全体の変更をリッスンします。 location.href の変更が検出されると、オブザーバー コールバック関数がトリガーされ、必要なアクションを実行できます。

最新の JavaScript 仕様を使用

<code class="js">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;
      // 执行相关的操作
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;</code>

このスクリプトは、ES6 のアロー関数と Observe メソッドを備えた最新の JavaScript 仕様を使用します。これは上記のスクリプトと同等であり、location.href の変更をリッスンするためのよりクリーンな方法を提供します。

以上がGreasemonkey スクリプトで MutationObserver を使用して「location.href」の変更を検出する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。