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