通过window.postMessage动态设置跨域Iframe高度时切换宽度高度异常如何解决

DevOps 小满

2026-10-11

问题根因

你当前遇到的问题核心是：父级主动将iframe高度设置为移动端场景的较大值后，iframe内部的document.body会被iframe的视口高度撑开，即使后续iframe宽度切回桌面端、内容实际高度变小，body.scrollHeight仍然会保留之前的较大值，不会自动收缩到真实内容高度，所以返回给父级的高度始终是偏大的。

修复方案

1. 调整iframe侧的高度计算逻辑

每次收到高度获取请求时，先临时重置body的高度为auto，触发浏览器重排让body收缩到真实内容高度后，再读取高度值返回即可。修改后的代码如下：

window.onmessage = e => {
  if (e.data === 'getIframeHeight') {
    // 先重置body高度为auto，让其收缩到真实内容高度
    document.body.style.height = 'auto';
    // 读取真实的scrollHeight
    const iframeHeight = document.body.scrollHeight;
    window.parent.postMessage(iframeHeight, '*');
  } 
};

2. 可选优化点

如果iframe内部内容有异步渲染/动画效果，可以在读取高度前加requestAnimationFrame等待重排完成，避免拿到的高度不准确：

window.onmessage = e => {
  if (e.data === 'getIframeHeight') {
    document.body.style.height = 'auto';
    requestAnimationFrame(() => {
      const iframeHeight = document.body.scrollHeight;
      window.parent.postMessage(iframeHeight, '*');
    })
  } 
};