iframe高度自适应需分同源与跨域处理：同源用onload+settimeout读scrollheight并重置body边距；跨域必须postmessage校验origin；ios webview等场景也推荐postmessage，并注意父容器显式设高。
iframe 高度自适应没有“写个 CSS 就行”的解法——同源和跨域必须走完全不同的路径，混用必报 SecurityError 或 iframe 塌缩成一条线。
同源 iframe 为什么 onload 后直接读 scrollHeight 经常不准
常见现象是 iframe 高度突然截断、底部内容消失，刷新偶尔正常但不可靠。原因有三个：
— 子页 CSS 渲染或字体加载还没完成，body.scrollHeight 返回 0 或偏小值
— body 默认有 margin: 8px，不重置会多算高度
— DOM 已加载，但 layout（重排）尚未触发，scrollHeight 拿不到真实渲染后尺寸
实操建议：
• 在 iframe.onload 里加 setTimeout(() => { /* 读高 */ }, 0)，让浏览器先完成重排
• 优先读 document.documentElement.scrollHeight，fallback 到 body.scrollHeight
• 子页必须加 body { margin: 0; padding: 0; }
• 父页设高用 iframe.style.height = Math.max(height, 300) + 'px'，防空内容塌陷
跨域 iframe 必须用 postMessage，且 event.origin 校验不能省
只要协议、域名、端口任一不同（比如父页是 https://a.com，iframe 是 https://b.com/report.html），直接访问 contentDocument 就会抛出 Blocked a frame from accessing a cross-origin frame 错误。
实操建议：
• 子页在 window.addEventListener('load', ...) 里计算高度，再调用 window.parent.postMessage({ type: 'iframeHeight', height: h }, 'https://trusted.com')
• 父页监听 message 时，必须校验 event.origin === 'https://trusted.com'，绝不能用 '*' 上线
• 子页若含 Vue/React 动态内容，需在 mounted 或 useEffect 后再发消息，避开 SSR 阶段
• 父页收到消息后，用 iframe.style.height = data.height + 'px' 更新，别改 iframe.height 属性
移动端 Safari / 微信 WebView 中同源 iframe 也建议走 postMessage
这不是“可选优化”，而是现实约束：iOS WebView 内核对同源 iframe 的 DOM 访问时序更敏感，onload 后立即读 contentDocument 常返回 null 或 0，尤其在 PWA 或微信内嵌页中。
实操建议：
• 子页在 DOMContentLoaded 和 resize 两个时机都发高度消息（键盘弹起、横竖屏切换都会触发 resize）
• 发消息前加 setTimeout(sendHeight, 100)，等至少一帧渲染完成
• 父页对 resize 类消息做简单防抖（clearTimeout + setTimeout），避免高频设高影响性能
• 如果子页用了 Web Font，还需监听 document.fonts.ready（现代浏览器）再发一次高度，防文字回流导致二次变化
真正容易被忽略的点是：父容器本身必须有明确高度（比如 height: 100vh 或固定像素），否则即使 iframe 高度设对了，也会因父级 height: auto 导致视觉上仍塌缩；而这个约束，在嵌套多层 flex/grid 布局时尤其隐蔽。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
