iframe高度自适应需用JavaScript动态设置：同源时通过onload读取contentDocument.body.scrollHeight并设style.height；跨域时必须用postMessage双向通信，子页上报、父页校验origin后更新高度。
iframe 高度自适应不是靠 CSS 的 height: 100% 或 auto 能解决的——它默认会按固定高度（如 150px）渲染，且内容高度变化时不会自动拉伸。真正起作用的是 JavaScript 动态读取内容真实高度并设置 style.height，但必须分清同源和跨域两种场景，否则代码跑不通、报错或白屏。
同源 iframe：用 onload + scrollHeight 最简可靠
前提是 iframe 的 src 和当前页面协议、域名、端口完全一致（比如都是 https://example.com/page.html）。这时可以直接访问子页面 DOM。
关键点：
-
scrollHeight比offsetHeight更准，它包含溢出部分，适合长内容 - 必须在
load事件后读取，否则body可能还没渲染完，返回0 - 建议加
Math.max(height, 300)防止空内容导致 iframe 塌陷 - 被嵌入页的
最好重置：body { margin: 0; padding: 0; }，否则高度会多出默认边距
示例代码：
<iframe id="myIframe" src="same-origin-page.html"></iframe>
<script>
const iframe = document.getElementById('myIframe');
iframe.onload = () => {
try {
const doc = iframe.contentDocument || iframe.contentWindow.document;
const height = doc.body.scrollHeight;
iframe.style.height = Math.max(height, 300) + 'px';
} catch (e) {
console.warn('高度获取失败:', e.message);
}
};
</script>
跨域 iframe：必须用 postMessage 双向通信
只要 src 域名或协议不同（例如主站是 https://a.com，iframe 是 https://b.com/report.html），直接读 contentDocument 就会触发 SecurityError，控制台报错 Blocked a frame from accessing a cross-origin frame。
这时不能甩锅给“浏览器限制”，而要让子页面主动“上报”高度：
- 子页面监听
resize和DOMContentLoaded，调用window.parent.postMessage({ type: 'iframeHeight', height: ... }, '*') - 父页面用
window.addEventListener('message', ...)接收，并严格校验event.origin（别用'*'上线） - 子页面推荐用
document.documentElement.scrollHeight，兼容性比body.scrollHeight更稳 - 如果子页面是第三方报表系统（如 FineReport），通常自带
afterload或onPageLoad钩子，应在钩子里发消息，而非只依赖resize
动态内容（Vue/React/MathJax 渲染后）需二次触发
单纯监听 load 不够——很多页面加载完 HTML 后，JS 还要异步拉数据、渲染图表、排版公式，此时 scrollHeight 仍是初始值。
可行方案：
- 子页面在关键渲染完成点（如
mounted、MathJax.typeset()回调）里再发一次postMessage - 父页面不依赖单次消息，而是把高度更新逻辑封装成函数，在收到任意合法消息时都执行一次
- 避免轮询（如
setInterval查scrollHeight），既耗性能又不可靠；MutationObserver 在跨域下也无效
滚动行为：别让 iframe 自己滚，要父容器统一滚
目标是用户只看到一个滚动条（外层 div 的），而不是 iframe 内部再套一个滚动条。这需要三处配合：
-
iframe属性加scrolling="no"（HTML4）或 CSS 加overflow: hidden - 父容器（如
.content-wrapper）设overflow-y: auto且有明确高度/最大高度（如max-height: 80vh） -
iframe样式加display: block，否则底部可能有空白间隙 - 若父容器高度受限，而内容超长，
scrollHeight算出来很大也没用——此时应允许 iframe 自身可滚动，或改用响应式分页
真正容易被忽略的，是子页面 JS 渲染延迟和跨域消息校验。很多“自适应失效”问题，表面看是高度没变，实际是消息根本没发出来，或父页面压根没收到、没处理。先确认控制台有没有 postMessage 发送日志，再查 message 监听是否注册成功，比反复调 scrollHeight 有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
