MutationObserver 检测空子元素的变化

Question

我有一个 iframe 正在呈现来自另一个域的内容。显然我无法从其他域 (returns null) 访问 contentDocument。但是当用户对呈现的 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 中的元素发生变化，警报也永远不会触发。我已经阅读了很多示例，但也许我仍然不知道它是如何工作的。有人可以帮助解释为什么这个观察者没有触发突变吗？

提前致谢

Answer 1

当 <iframe> 中的浏览上下文更改其 location 时，包含 <iframe> 的 src 属性不会更改，因此您的页面不能看看有什么不同。

既然你显然控制了另一个页面，你可以做的是 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 );

MutationObserver 检测空子元素的变化

MutationObserver to detect change in null child element

javascript

iframe

mutation-observers

mutation-events