跨域场景下postmessage是唯一可靠方案；同域需onload后加settimeout(0)再读documentelement.scrollheight，因css渲染、字体图片加载未完成时直接读scrollheight常返回偏小值导致截断。
跨域场景下，postMessage 是唯一可靠、无需妥协的方案；同域场景下，直接读 contentDocument.body.scrollHeight 最简，但必须等 load 事件后加 setTimeout(0) 才准。
为什么直接读 scrollHeight 常常不准
常见错误现象是 iframe 高度被设得过小，底部内容被截断——这不是计算逻辑错，而是时机问题。子页面 DOM 可能已加载，但图片、字体、CSS 动画或异步脚本还没完成渲染，scrollHeight 就提前返回了偏小值。
使用场景：仅适用于同域 iframe，且子页无大量延迟资源（如懒加载图、WebFont、动态 JS 插件）。
- 必须监听
iframe.onload，不能只靠window.onload - 在 onload 回调里用
setTimeout(() => { /* 读 height */ }, 0)，让浏览器先完成重排 - 要处理
box-sizing: border-box和body默认margin，建议子页重置：body { margin: 0; } - 若子页内容会后续变化（如点击展开），需额外加
MutationObserver或ResizeObserver监听
跨域 iframe 必须用 postMessage，但别用 '*'
错误写法：window.parent.postMessage(height, '*') —— 生产环境等于开放 XSS 通道。父页监听时也用 event.origin === 'https://trusted-domain.com' 校验来源。
使用场景：嵌入第三方服务（如客服系统、支付页、SaaS 工具面板）、微前端子应用、不同子域间通信。
- 子页发送前确保 DOM 加载完成：
window.addEventListener('DOMContentLoaded', () => { /* postMessage */ })或window.onload - 高度取值推荐
document.documentElement.scrollHeight，比body.scrollHeight更稳定（尤其当html有 padding/border 时） - 父页收到消息后，应做数值校验：
typeof event.data === 'number' && event.data > 0，防止恶意传参破坏布局 - 若子页高度频繁变动（如实时聊天窗口），建议加防抖，避免每打一个字就发一次消息
不想手写通信？用 iframe-resizer 但注意配置项
它本质是封装好的 postMessage + ResizeObserver 组合，省去协议约定和边界判断，但默认配置可能不匹配你的子页结构。
性能影响：比纯手写略重（多一层消息解析和定时 fallback），但兼容性覆盖 IE11+，对多数项目仍是性价比最高的选择。
-
heightCalculationMethod: 'bodyScroll'是最常用选项，但若子页用了height: 100vh或 flex 布局，可能需换为'documentElementOffset' - 务必在子页引入
iframeResizer.contentWindow.min.js，否则无法自动上报高度 - 父页初始化时传
checkOrigin: true（默认开启），它会自动校验event.origin，比手写更安全 - 禁用
autoResize: false后可手动调用iFrameResize.resize()，适合内容局部刷新后重算
真正容易被忽略的是：所有方案都依赖子页“知道自己被嵌在 iframe 里”。如果子页是第三方不可控页面（比如直接嵌 https://example.com），那任何自适应方案都会失效——此时只能接受固定高度 + 内部滚动，或推动对方接入标准通信协议。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
