如何在 JavaScript 中检测并响应 URL 变化？

如何在 URL 更改时触发事件

为定期修改 window.location.href 的网站开发 Greasemonkey 脚本时，通常需要执行特定操作来响应这些 URL 更改。然而，利用轮询或超时作为潜在的解决方案可能效率低下。

为了避免此类问题，我们提出了一种利用 MutationObserver API 的高效方法。通过监视 body 元素内的更改，此脚本可以有效地检测 URL 修改并提供对修改后文档的 DOM 的访问：

var oldHref = document.location.href;

window.onload = function() {
    var bodyList = document.querySelector('body');

    var observer = new MutationObserver(function(mutations) {
        if (oldHref != document.location.href) {
            oldHref = document.location.href;
            /* Insert your code here */
        }
    });
    
    var config = {
        childList: true,
        subtree: true
    };
    
    observer.observe(bodyList, config);
};

或者，如果您喜欢更简洁和现代的方法，您可以使用以下脚本，它利用最新的 JavaScript 规范：

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

window.onload = observeUrlChange;

此方法允许您将所需的功能附加到 URL 更改时触发的事件，从而提供对修改后文档的 DOM 的访问。

以上是如何在 JavaScript 中检测并响应 URL 变化？的详细内容。更多信息请关注PHP中文网其他相关文章！