onload后立即读scrollHeight不准，因CSS渲染、字体加载、图片解码及Vue/React异步渲染未完成；须用setTimeout(0)延后读document.documentElement.scrollHeight，并重置iframe.style.height='auto'。
iframe onload 后立即读 scrollHeight 为什么总不准
因为 onload 只保证 HTML 和脚本加载完成，不保证 CSS 渲染、字体就绪、图片解码、Vue/React 组件挂载或异步接口返回后的 DOM 更新。此时读 document.body.scrollHeight 极大概率拿到 0 或偏小值——尤其子页用 axios.get() 拉数据再 v-for 渲染列表时，onload 早就触发完了。
- 必须放弃“加载完就立刻读”的直觉，改用延迟 + 容错组合
- 优先读
document.documentElement.scrollHeight，它比body.scrollHeight更稳定（兼容 margin 折叠、怪异模式） - 读取前先重置
iframe.style.height = 'auto'，避免旧高度干扰重排 - 加
setTimeout(() => { /* 读高 */ }, 0)推到下一轮事件循环，给浏览器留出 layout 时间
同域 iframe 中监听异步内容变化的最小可行方案
不能只靠 onload，得在子页内部主动通知父页高度变化。最轻量做法是：子页在关键异步操作完成（如 mounted、useEffect、then 回调）后，调用 window.parent.postMessage() 上报新高度。
- 子页 JS 示例：
fetch('/api/data').then(r => r.json()).then(data => { // 渲染完数据后 const height = document.documentElement.scrollHeight; if (window.parent !== window) { window.parent.postMessage({ type: 'iframe-height', height }, '*'); } }); - 父页监听：
window.addEventListener('message', event => { if (event.origin !== 'https://your-subdomain.com') return; if (event.data.type === 'iframe-height') { const iframe = document.getElementById('my-iframe'); iframe.style.height = event.data.height + 'px'; } }); - 不推荐用
MutationObserver监听子页 body —— 跨域不可用，同域也容易漏掉渲染后布局变化（比如字体回流）
跨域 iframe 高度同步必须校验 origin，不能用 '*' 生产环境
子页发消息时若写 window.parent.postMessage(height, '*')，任何页面嵌入它都能篡改父页 iframe 高度，存在 UI 伪造风险。生产环境必须硬编码可信源。
- 子页发送前检查：
if (window.parent !== window && event.origin === 'https://trusted-parent.com') - 父页接收时必须严格比对：
if (event.origin !== 'https://trusted-parent.com') return - 高度值建议带单位传过去，例如
{ height: '842px' }，避免父页再拼字符串出错 - 如果子页本身也支持
ResizeObserver，可监听document.documentElement并在尺寸变化时发消息，比轮询更精准
为什么 setTimeout(0) 不够，有时还得等 font-display ready
子页用了 Web Font 且设了 font-display: swap 时，文字会先以 fallback 字体渲染（矮），等真正字体加载后再回流（变高）。这时仅靠 setTimeout(0) 读出来的高度仍是错的。
立即学习“前端免费学习笔记（深入）”；
- 现代浏览器可用：
document.fonts.ready.then(() => { const height = document.documentElement.scrollHeight; window.parent.postMessage({ type: 'iframe-height', height }, 'https://parent.com'); }); - 降级方案：加一个稍长的兜底延时，比如
setTimeout(..., 300)，覆盖多数字体加载场景 - 注意：不要在父页做字体监听——父页无法访问跨域子页的
document.fonts
实际项目里最容易被忽略的是子页异步逻辑和父页通信时机的错位。不是“子页一动就发”，而是“子页确定渲染完毕、布局稳定、字体就绪后才发”。少一个环节，高度就卡在旧值上。
