如何在window.location变更后持久化MutationObserver？

场景代码 #

监听 document 的 DOM 变化：

let mutationObserver = new MutationObserver(mutations => {
    // 处理DOM变更的逻辑
});

mutationObserver.observe(document, {
    attributes: false,
    childList: true,
    characterData: false,
    subtree: true
});

执行页面跳转：

window.location = newUrl;

问题 #

1. 此前的 MutationObserver 被销毁是否属于预期行为？
2. 是否存在方法能在 URL 变更后持久化 MutationObserver？如果没有，有没有其他可实现类似持久化监听的方案？

回答 #

1. 这是完全符合预期的行为。当通过 window.location 跳转到新URL时，浏览器会完全卸载当前页面的所有资源——包括整个JavaScript执行上下文、DOM树，以及绑定在上面的 MutationObserver 实例，所有关联对象都会被垃圾回收，这是页面导航的标准机制。

2. 没法直接持久化原有的 MutationObserver，因为页面跳转后原上下文已经彻底消失。不过有几种替代方案可以实现跨页面的持续DOM监听：

   • 浏览器扩展：扩展的后台脚本或内容脚本运行在独立于页面的环境中，只要扩展处于启用状态，就能在每个加载的目标页面里自动注入并初始化新的 MutationObserver，实现全程监听。
   • 改造为单页应用（SPA）：如果你的项目可以改成SPA模式，用 history.pushState 或 replaceState 做路由跳转，页面不会完全刷新，原有的 MutationObserver 可以继续工作，无需重新创建。
   • 用户脚本：比如用Tampermonkey、Greasemonkey这类工具编写用户脚本，脚本会在匹配规则的页面加载时自动运行，每次都初始化新的 MutationObserver，从而实现持续监听的效果。

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