跨域 iframe 无法直接读取 contentdocument，同域也常因 dom 未就绪导致 scrollheight 偏小；同域需用 load + requestanimationframe 或 settimeout(0) 读 documentelement.scrollheight；跨域必须由子页 postmessage 通知父页，并校验 origin；推荐使用 iframe-resizer 插件统一处理。
跨域 iframe 无法直接读取 contentDocument，同域也常因 DOM 未就绪或重排未完成导致 scrollHeight 取值偏小——这不是 JS 写得不对，而是时机和权限问题。必须按场景选方案，不能一套代码打天下。
同域 iframe：用 load + setTimeout(0) 再读高度
直接在 iframe.onload 里取 contentWindow.document.body.scrollHeight 很可能不准，因为样式计算、图片加载、脚本执行都还没完全结束。
- 必须等一帧再读：用
setTimeout(() => { /* 读 height */ }, 0)或requestAnimationFrame - 优先读
document.documentElement.scrollHeight，它比body.scrollHeight更可靠（尤其当body有 margin 或未重置时） - 记得处理
box-sizing: border-box和overflow: hidden对高度的影响，否则父页面滚动条可能意外出现
跨域 iframe：必须由子页主动发 postMessage
父页永远拿不到跨域 iframe 的 DOM，contentWindow 是 null 或被拒绝访问。唯一可行路径是子页自己算好高度，主动通知父页。
- 子页发消息时，
origin不能写'*'，生产环境必须校验event.origin === 'https://your-parent-domain.com' - 子页应在
window.onload后发送，但若内容会动态增删（比如 React/Vue 渲染），还需监听MutationObserver或配合框架的生命周期钩子再发一次 - 父页收到消息后，别直接赋
style.height，先做数值校验：if (typeof event.data === 'number' && event.data > 0)，避免恶意脚本注入
不想手写通信逻辑？用 iframe-resizer 插件
它把 postMessage 协议、防抖、重试、多种高度计算策略（bodyScroll / documentElementOffset 等）都封装好了，比手写更稳。
- 父页引入
iframeResizer.min.js，调用iFrameResize({ heightCalculationMethod: 'bodyScroll' }, '#myIframe') - 子页必须同步引入
iframeResizer.contentWindow.min.js，否则不发消息 - 注意：插件默认启用
autoResize，但若子页内容变化极频繁（如实时日志滚动），建议关掉并手动触发iFrameResize.resize()
真正容易被忽略的是：iframe 高度自适应不是“设一次就完事”，而是要应对内容加载、JS 渲染、CSS 动画、用户交互等所有可能改变高度的环节。跨域下子页控制权在别人手里，你得提前约定好通信时机和格式；同域下则要盯紧 DOM 就绪时机，而不是盲目相信 load 事件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
