如何检测iframe内部动态元素的类加载状态并调整iframe高度

首先需要确认你的父页面和iframe的src属于同源（同协议、同域名、同端口），否则无法直接操作iframe内部DOM，需要走跨域通信方案。

同源场景解决方案 #

使用MutationObserver监听iframe内部#overlap-root的节点及属性变化，是目前最稳定的监听动态DOM变化的方案，实现逻辑如下：
首先给你的iframe添加id方便元素选择：

<div style="width: 800px; height: 500px; overflow: hidden">
<iframe id="myIframe" src="https://mypage.com" width="900px"  style="position: relative; left: -6%; top: -8%"></iframe>
</div>

父页面执行的JS逻辑：

// 保存iframe原始高度
const originalHeight = '500px'
// 弹窗出现时要设置的高度，可根据实际需求调整
const dialogHeight = '800px'
const iframe = document.getElementById('myIframe')

iframe.addEventListener('load', () => {
  const iframeDoc = iframe.contentDocument || iframe.contentWindow.document
  const overlapRoot = iframeDoc.getElementById('overlap-root')
  if (!overlapRoot) return

  // 创建监听器实例
  const observer = new MutationObserver((mutations) => {
    // 检查是否存在目标弹窗元素
    const hasDialog = overlapRoot.querySelector('._dialog-nonmodal') !== null
    if (hasDialog) {
      iframe.style.height = dialogHeight
    } else {
      iframe.style.height = originalHeight
    }
  })

  // 配置监听规则：监听子节点增减、后代节点变化、类名属性变化
  observer.observe(overlapRoot, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['class']
  })
})

跨域场景解决方案 #

如果iframe和父页面不同源，无法直接访问内部DOM，需要iframe侧的页面配合做跨域通信：

1. iframe内部页面监听自身弹窗的出现/消失状态，状态变化时通过postMessage给父页面发通知：

// iframe内部页面的JS逻辑
const observer = new MutationObserver((mutations) => {
  const hasDialog = document.getElementById('overlap-root').querySelector('._dialog-nonmodal') !== null
  window.parent.postMessage({ type: 'dialogStateChange', visible: hasDialog }, '*')
})
observer.observe(document.getElementById('overlap-root'), {
  childList: true,
  subtree: true,
  attributes: true,
  attributeFilter: ['class']
})

2. 父页面监听message事件，根据收到的状态修改iframe高度：

const originalHeight = '500px'
const dialogHeight = '800px'
const iframe = document.getElementById('myIframe')

window.addEventListener('message', (e) => {
  // 建议添加来源校验避免恶意消息，例如：if(e.origin !== 'https://mypage.com') return
  if (e.data?.type === 'dialogStateChange') {
    iframe.style.height = e.data.visible ? dialogHeight : originalHeight
  }
})

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