如何根据iframe实际高度调整其父容器div高度？控制台高度值异常

核心问题：跨域限制 #

你遇到的问题根源是浏览器的同源策略限制：当iframe加载外部域名（比如示例里的https://www.example.com）内容时，浏览器会禁止父页面访问iframe内部的contentWindow.document对象。这时候你拿到的scrollHeight根本不是目标页面的真实高度，而是浏览器默认空白文档的高度（也就是你看到的67px）。

快速验证 #

打开浏览器控制台，手动执行iframe.contentWindow.document，会直接抛出DOMException: Blocked a frame with origin "xxx" from accessing a cross-origin frame的错误，这就能实锤是跨域导致的。

可行解决方案 #

情况1：你能修改iframe指向的页面代码 #

用postMessage实现跨域通信传递高度，这是最靠谱的方案：

• 在iframe页面里加这段代码：

window.addEventListener('load', () => {
  // 取body或html的滚动高度，兼容不同页面布局
  const realHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
  // 发送高度给父页面，建议把*替换成父页面的具体域名，更安全
  window.parent.postMessage({ type: 'iframeHeight', height: realHeight }, '*');
});

• 父页面里监听消息并调整高度：

window.addEventListener('message', (event) => {
  // 先验证消息来源，防止恶意网站发消息捣乱
  if (event.origin !== 'https://www.example.com') return;
  if (event.data.type === 'iframeHeight') {
    document.getElementById('iframe-parent').style.height = `${event.data.height}px`;
  }
});

情况2：你无权修改iframe指向的页面 #

只能用折中方案：

• 直接给父容器设一个足够大的固定高度（比如2500px），或者让父容器支持滚动：

#iframe-parent {
  height: auto;
  max-height: 100vh;
  overflow-y: auto;
}

• 不要尝试用服务器代理爬取目标页面内容计算高度，大概率违反目标网站的使用协议，还可能有法律风险。

额外检查点 #

• 确认onload事件真的触发了：可以在resizeIframe函数开头加console.log('iframe loaded')，避免因为页面加载失败导致函数没执行。
• 不要只依赖body.scrollHeight：有些页面会把滚动高度挂在html元素上，所以建议同时取document.documentElement.scrollHeight做兼容。

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