如何在 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中文网其他相关文章！