如何在 Greasemonkey 腳本中使用 MutationObserver 檢測 `location.href` 的變化？

監聽Location.href 更改的事件

在編寫Greasemonkey 腳本時，有時需要在網站修改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中文網其他相關文章！