iframe高度不随内容撑开的常见表现是只显示一截内容、底部被裁剪且滚动条出现在iframe内部；根本原因是height设为固定值，未适配子页面动态变化的高度。
iframe 高度不随内容撑开，常见表现是什么
页面里嵌了 <iframe></iframe>，但只显示一截内容，下面被裁掉，滚动条出现在 iframe 内部而不是整个页面——这说明 iframe 的 height 是固定值，没随子页面高度变化。更糟的是，子页面 DOM 加载完成、动态渲染（比如 Vue/React 初始化后）或异步加载数据后，高度又变了，iframe 却不动。
用 postMessage 实现父子页通信来同步高度
这是最可靠、跨域也支持的方式：子页面计算自身 document.body.scrollHeight 或 document.documentElement.scrollHeight，通过 window.parent.postMessage() 发给父页；父页监听 message 事件，拿到高度后设置 iframe 的 style.height。
子页面（iframe 内）关键代码：
function sendHeight() {
const h = Math.max(
document.body.scrollHeight,
document.body.offsetHeight,
document.documentElement.clientHeight,
document.documentElement.scrollHeight,
document.documentElement.offsetHeight
);
window.parent.postMessage({ type: 'IFRAME_HEIGHT', height: h }, '*');
}
sendHeight();
window.addEventListener('load', sendHeight);
window.addEventListener('resize', sendHeight); // 防止窗口缩放或字体加载影响
父页面（含 iframe 的管理页）监听逻辑：
window.addEventListener('message', (e) => {
if (e.data.type === 'IFRAME_HEIGHT') {
const iframe = document.getElementById('myIframe');
if (iframe) iframe.style.height = e.data.height + 'px';
}
});
- 务必校验
e.origin而非直接用'*'（尤其生产环境），避免 XSS 风险 - 子页面需确保 DOM 已就绪再调用
sendHeight()，可包裹在DOMContentLoaded或框架的mounted/useEffect中 - 若子页面有频繁 DOM 变动（如列表分页、折叠展开），建议加防抖，否则会连续触发重设高度
纯同源场景下可用 iframe.contentDocument 直接读取
如果 iframe 和父页同域（协议+域名+端口完全一致），可以跳过 postMessage，直接访问 iframe 内部文档：
const iframe = document.getElementById('myIframe');
const doc = iframe.contentDocument || iframe.contentWindow?.document;
if (doc) {
const h = Math.max(
doc.body.scrollHeight,
doc.documentElement.scrollHeight
);
iframe.style.height = h + 'px';
}
- 必须等 iframe 的
load事件触发后再执行，否则contentDocument为 null - IE11 及更旧浏览器需用
iframe.contentWindow.document，现代浏览器推荐优先用contentDocument - 这个方式无法用于跨域 iframe，强行访问会抛出
SecurityError
为什么不能只靠 CSS 的 height: 100% 或 min-height
height: 100% 在 iframe 上无效，因为 iframe 不继承父容器的“可用高度”；min-height 只能设下限，无法响应内容真实高度变化。另外，vh 单位是视口高度，和内容无关，滚动时依然会露出空白或遮挡。
容易被忽略的一点：iframe 默认有 border 和 margin（不同浏览器默认值不同），会导致视觉错位。建议统一重置：
iframe {
border: none;
margin: 0;
display: block; /* 避免底部多出几像素空白 */
}
真正麻烦的不是怎么写，而是子页面何时才算“高度稳定”——比如图表库渲染完成、图片加载完毕、第三方 SDK 插入浮动按钮之后，都可能改变 body 高度。所以发 height 消息的时机比代码本身更需要结合具体业务判断。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
