如何实现iframe自适应内容尺寸？解决内容高度变化无滚动问题

同域场景（iframe加载内容与父页面同域名） #

这种场景下可以直接读取iframe内部内容的高度，实现自适应：

• 给iframe设置唯一ID，监听其load事件，加载完成后获取内部文档的滚动高度，再设置iframe的高度：

<iframe id="resultFrame" src="your-local-content.html" width="800px" frameborder="0"></iframe>

<script>
const resultFrame = document.getElementById('resultFrame');

// 监听iframe加载完成事件
resultFrame.addEventListener('load', () => {
  // 获取内部内容的实际滚动高度
  const contentHeight = resultFrame.contentDocument.body.scrollHeight;
  // 设置iframe高度，额外加10px避免边距导致的滚动条
  resultFrame.style.height = `${contentHeight + 10}px`;
});
</script>

如果iframe内的内容是动态更新的（比如异步加载数据），可以在iframe内部页面主动通知父页面调整高度：

// iframe内部页面脚本，内容更新后调用此函数
function notifyParentResize() {
  const currentHeight = document.body.scrollHeight;
  window.parent.postMessage({ type: 'resize', height: currentHeight }, '*');
}

父页面添加消息监听：

window.addEventListener('message', (event) => {
  if (event.data?.type === 'resize') {
    resultFrame.style.height = `${event.data.height + 10}px`;
  }
});

跨域场景（iframe加载外部域名内容） #

受浏览器同源策略限制，父页面无法直接读取iframe内部内容，需要目标页面配合通过postMessage传递高度信息：

父页面代码：

<iframe id="resultFrame" src="https://external-domain.com/your-content" width="800px" frameborder="0"></iframe>

<script>
const resultFrame = document.getElementById('resultFrame');

// 监听来自iframe的消息，建议验证来源域名提升安全性
window.addEventListener('message', (event) => {
  // if (event.origin !== 'https://external-domain.com') return;
  if (event.data?.type === 'updateIframeHeight') {
    resultFrame.style.height = `${event.data.height + 10}px`;
  }
});
</script>

iframe目标页面代码：

// 页面加载完成后发送高度信息
window.addEventListener('load', () => {
  sendHeightToParent();
});

// 内容动态更新时调用此函数
function sendHeightToParent() {
  const contentHeight = document.body.scrollHeight;
  // 最好指定父页面的origin，比如 'https://your-parent-domain.com'，避免消息泄露
  window.parent.postMessage({ type: 'updateIframeHeight', height: contentHeight }, '*');
}

额外注意事项 #

• 使用scrollHeight而非clientHeight，因为前者会包含超出可视区域的内容高度，更准确。
• 如果iframe内有图片、视频等异步资源，必须等所有资源加载完成后再计算高度，window.onload会等待所有资源加载完毕，比DOMContentLoaded更可靠。
• 额外添加的像素值可根据实际页面的边距、padding调整，避免滚动条残留。

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