MutationObserver 檢測 null 子元素的變化

Question

我有一個 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 中的元素發生更改，警報也不會觸發。 我讀過很多例子，但也許我仍然想念它是如何工作的。 有人可以幫助解釋為什么這個觀察者沒有觸發突變嗎？

提前致謝

Answer 1

當<iframe>中的瀏覽上下文更改其location時，包含<iframe>的src屬性不會更改，因此您的頁面看不到任何差異。

由於您顯然控制了另一個頁面，因此您可以做的就是將消息發布到您的主頁。
然后你只需要聽那個消息，你就知道你的框架已經回來了。

// 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 );