MutationObservers を使用して Greasemonkey スクリプトの URL 変更を効率的にキャプチャする方法

Greasemonkey スクリプトでの URL 変更のキャプチャ

Greasemonkey スクリプトでは、イベントを使用して URL 変更を監視することが多くの場合必要になります。ただし、ポーリングやタイムアウトの方法は理想的ではない可能性があります。ここでは、MutationObservers を使用して URL の変更をシームレスに検出して処理するソリューションを紹介します。

このアプローチを実装するには、次の手順に従います。

1. DOM 参照変​​数を初期化します。

   • 元の URL を保持する変数を初期化します: var oldHref = document.location.href;
   • MutationObserver 監視の body 要素を選択します: var bodyList = document.querySelector( 'body');

2. MutationObserver を作成します:

   • 次のときにトリガーされるコールバック関数を使用して MutationObserver をインスタンス化します。 URL の変更: varobserver = new MutationObserver(function(mutations) { ... });

3. MutationObserver オプションの構成:

   • 子の変更とサブツリーの変更を監視するようにオブザーバーを構成します: var config = { childList: true, subtree: true };

4. DOM にオブザーバーを追加:

   • ボディ要素の変更の監視を開始します:observer.observe(bodyList, config);

5. ハンドル URLコールバックの変更:

   • オブザーバー コールバック内で、URL の変更を確認し、必要なアクションを実行します: if (oldHref != document.location.href) { ... }

このソリューションは MutationObservers を活用しており、URL の変更によるものを含む DOM の変更を監視する効率的な方法を提供します。ポーリングやタイムアウトのメソッドを回避し、URL の変更をリアルタイムで検出し、変更された URL を指すドキュメントの DOM にアクセスできるようにします。

以上がMutationObservers を使用して Greasemonkey スクリプトの URL 変更を効率的にキャプチャする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。