MutationObserver 检测空子元素的变化

如何解决MutationObserver 检测空子元素的变化

我有一个 iframe 正在呈现来自另一个域的内容。显然我无法从其他域访问 contentDocument（返回 null）。但是当用户对呈现的 iframe 执行操作时，它会重定向回我的域。所以那时我能够阅读文档。基本上一旦 contentDocument 不是 null，我想执行一个操作。

目前我只是想在 iframe 的子级（在这种情况下它的 contentDocument 发生变异...

window.onload = () => {
  setTimeout(initializeObserver,2000)
}

const initializeObserver = () => {
  const iframe = document.getElementById('my_iframe')

  observer.observe(
    iframe,{
      attributes: true,childList: true,subtree: true
    }
  )
}

const observer = new MutationObserver(mutations => {
  mutations.forEach(mutation => {
    if(mutation.addednodes.length) {
      alert("SOMETHING HAPPENED!")
    }
  })
})

但即使添加了子节点并且 iframe 中的元素发生变化，警报也不会触发。我已经阅读了很多示例，但也许我仍然缺少它是如何工作的。有人可以帮助解释为什么这个观察者没有触发突变吗？

提前致谢

解决方法

当 <iframe> 中的浏览上下文更改其 location 时，包含 src 的 <iframe> 属性不会改变，因此您的页面看不到任何区别。

既然您显然控制了另一个页面，那么您可以做的是post a message 到您的主页。
然后你只需要听那个消息，你就知道你的框架已经回来了。

// in main
addEventListener("message",(evt) => {
  if( evt.origin === location.origin && evt.data === "I'm back" ) {
    // your page came back
  }
});

// in framed page
top.postMessage( "I'm back",location.origin );