MutationObserver监听同域iframe回调在Firefox不触发Chrome正常求助

问题原因及解决思路 #

• 1 MutationObserver实例被垃圾回收
  你当前的mutationObservable是bind函数内的局部变量，函数执行完成后没有其他引用指向该实例，Firefox的垃圾回收机制会直接回收未被持有引用的MutationObserver实例，导致监听失效。Chrome/Edge/Safari的GC策略对这类实例的回收时机更宽松，因此可以正常运行。
  解决方法：将mutationObservable声明提升到外层作用域，避免被GC回收：

// 外层作用域声明，不要放在bind函数内部
let mutationObservable = null;
function bind () {
  // ...其他原有逻辑
  // 赋值给外层变量，避免GC回收
  const iframeElmWindow = document.querySelector('#chatbot iframe').contentWindow;
  mutationObservable = new iframeElmWindow.MutationObserver(cb);
  // ...原有监听逻辑
}

• 2 监听时机不正确
  当前用轮询判断iframe body存在的方式不够稳妥，Firefox中iframe的DOM上下文初始化完成的时机和Chrome有差异，建议优先监听iframe的load事件后再执行监听逻辑：

const iframe = document.querySelector('#chatbot iframe');
iframe.addEventListener('load', () => {
  // load事件触发后再获取body、初始化监听
  bind();
})

• 3 监听节点被替换
  如果iframe内部逻辑会替换body节点，你监听的原始body节点脱离DOM树后就不会再触发回调。可以改为监听iframe的根文档节点，避免被替换导致监听失效：

const iframeDoc = document.querySelector('#chatbot iframe').contentWindow.document;
// 监听documentElement而非body，覆盖全文档的节点变化
mutationObservable.observe(iframeDoc.documentElement, config);

• 4 上下文一致性校验
  确保构造MutationObserver的window对象、监听的节点、回调内查询用的document都来自同一个iframe上下文，避免跨上下文导致的兼容问题。

按照以上几点修改后即可解决Firefox下回调不触发的问题。

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