如何通过MutationObserver获取URL即时更新？解决首次变更不触发问题

问题原因 #

你的代码通过MutationObserver监听DOM子节点变化来间接检测URL变更，但URL变更（比如通过history.pushState/replaceState修改查询参数、hash值，或是浏览器地址栏手动修改后回车）本身不会触发DOM子节点变化。首次URL变更时如果没有伴随DOM更新，MutationObserver就不会触发回调；第二次变更时若刚好触发了DOM内容更新，才会触发回调，导致你看到首次不生效、第二次才生效的现象。

解决方案 #

要实现URL变更的即时监听，需要直接针对URL变更的场景处理，而不是依赖DOM变化。具体做法是：重写history的pushState和replaceState方法（这两个方法修改URL不会触发默认事件），同时监听popstate事件（处理浏览器前进后退），统一触发URL变更逻辑。

修正后的代码：

const getCurrentPageURL = () => {
  const currentPageUrl = document.URL;
  console.log(new URL(currentPageUrl))
}

function onUrlChange() {
  console.log("Hit URL");
  getCurrentPageURL();
}

// 重写pushState，触发自定义事件
const originalPushState = history.pushState;
history.pushState = function(...args) {
  originalPushState.apply(this, args);
  window.dispatchEvent(new Event('urlchange'));
};

// 重写replaceState，触发自定义事件
const originalReplaceState = history.replaceState;
history.replaceState = function(...args) {
  originalReplaceState.apply(this, args);
  window.dispatchEvent(new Event('urlchange'));
};

// 监听浏览器前进后退的popstate事件
window.addEventListener('popstate', onUrlChange);

// 监听自定义的urlchange事件
window.addEventListener('urlchange', onUrlChange);

// 可选：页面初始化时执行一次（根据需求决定）
// onUrlChange();

方案说明 #

• 重写pushState和replaceState：这两个API修改URL不会触发popstate事件，所以手动触发自定义的urlchange事件，确保这类URL变更能被捕获。
• 监听popstate：处理浏览器前进、后退按钮导致的URL变更。
• 这种方式直接针对URL变更的所有场景，不需要依赖DOM变化，能保证任何URL变更（查询参数添加/移除、hash变化、路由切换等）都能即时触发onUrlChange。

内容的提问来源于stack exchange，提问作者Mazumder