Greasemonkey の MutationObserver でページの URL が変更されたときにコードを実行する方法

ページの URL が変更されたときにコードを実行する方法

Greasemonkey スクリプトのコンテキストでは、ページの URL の変更に対応する必要があります。 URL (location.href) を効率的に実行します。タイムアウトやポーリングを導入せずにこれを実現するには、MutationObserver API の活用を検討してください。

MutationObserver を使用した解決策

1. 古い URL を初期化します:

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

2. ボディ要素に MutationObserver をアタッチします:

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

最新の JavaScript 仕様

最新の 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;
      /* Execute your code here */
    }
  });
  observer.observe(body, { childList: true, subtree: true });
};

window.onload = observeUrlChange;</code>

MutationObserver を利用すると、信頼性の低いポーリング手法に頼ることなく、URL の変更を効果的にキャプチャし、カスタム コードの実行をトリガーできます。

以上がGreasemonkey の MutationObserver でページの URL が変更されたときにコードを実行する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。