如何获取包含动态渲染script标签的iframe内容尺寸

前置条件 #

• 若直接在父页面操作iframe内容，需满足同源策略，或iframe配置了allow-same-origin的sandbox属性
• 跨域场景下需要iframe内部页面配合通信

父页面同源场景通用实现 #

核心逻辑是监听iframe内部DOM的所有动态变化，等所有动态渲染完全结束后再读取内容尺寸，无需针对特定站点的类名做判断：

function getIframeDynamicSize(iframeEl, callback) {
  // 等待iframe基础加载完成
  iframeEl.addEventListener('load', () => {
    const iframeDoc = iframeEl.contentDocument || iframeEl.contentWindow.document
    let timer = null
    // 监听DOM所有变更
    const observer = new MutationObserver(() => {
      // 防抖：变更停止300ms后认为渲染完成
      clearTimeout(timer)
      timer = setTimeout(() => {
        // 通用读取内容实际尺寸，不需要指定特定元素
        const contentHeight = Math.max(
          iframeDoc.body.scrollHeight,
          iframeDoc.body.offsetHeight,
          iframeDoc.documentElement.clientHeight,
          iframeDoc.documentElement.scrollHeight,
          iframeDoc.documentElement.offsetHeight
        )
        const contentWidth = Math.max(
          iframeDoc.body.scrollWidth,
          iframeDoc.body.offsetWidth,
          iframeDoc.documentElement.clientWidth,
          iframeDoc.documentElement.scrollWidth,
          iframeDoc.documentElement.offsetWidth
        )
        callback({ width: contentWidth, height: contentHeight })
        observer.disconnect()
      }, 300)
    })
    // 监听所有子节点、属性、子树变更，覆盖所有动态渲染场景
    observer.observe(iframeDoc.body, {
      childList: true,
      subtree: true,
      attributes: true,
      characterData: true
    })
  })
}

// 调用示例
const myIframe = document.querySelector('iframe')
getIframeDynamicSize(myIframe, (size) => {
  console.log('iframe实际内容尺寸：', size)
})

跨域场景通用实现 #

跨域时父页面无法直接访问iframe内部DOM，需要iframe内部页面植入一段通用逻辑，计算尺寸后通过postMessage传递给父页面：

iframe内部代码 #

let timer = null
const observer = new MutationObserver(() => {
  clearTimeout(timer)
  timer = setTimeout(() => {
    const contentHeight = Math.max(
      document.body.scrollHeight,
      document.body.offsetHeight,
      document.documentElement.clientHeight,
      document.documentElement.scrollHeight,
      document.documentElement.offsetHeight
    )
    const contentWidth = Math.max(
      document.body.scrollWidth,
      document.body.offsetWidth,
      document.documentElement.clientWidth,
      document.documentElement.scrollWidth,
      document.documentElement.offsetWidth
    )
    // 向父页面发送尺寸信息，*可替换为指定父域名提升安全性
    window.parent.postMessage({
      type: 'iframeResize',
      size: { width: contentWidth, height: contentHeight }
    }, '*')
    observer.disconnect()
  }, 300)
})
observer.observe(document.body, {
  childList: true,
  subtree: true,
  attributes: true,
  characterData: true
})

父页面接收代码 #

window.addEventListener('message', (e) => {
  // 可添加e.origin校验提升安全性
  if (e.data?.type === 'iframeResize') {
    console.log('iframe实际内容尺寸：', e.data.size)
  }
})

注意事项 #

• 防抖时长可根据实际业务场景调整，动态内容越多、加载越慢的场景可适当拉长
• 若iframe内部有懒加载资源，可额外监听img、video等媒体元素的load事件，避免资源未加载完成导致尺寸计算偏小
• 可根据需求保留MutationObserver的监听，实现iframe内容变化时的实时尺寸同步

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