同域 iframe 在 onload 后直接读 body.scrollHeight 常不准，因 CSS 未渲染、body 默认 margin 未清、DOM 未完成 layout；须用 setTimeout(() => {}, 0) 延迟读 documentElement.scrollHeight，并重置 body{margin:0;padding:0}。

同域 iframe 直接读取 scrollHeight 为什么经常不准

直接在 iframe.onload 里执行 iframe.contentDocument.body.scrollHeight，大概率拿到的是 0 或偏小值。原因有三个：子页面 CSS 还没渲染完成、body 默认 margin 没清、JS 执行时机早于 DOM 完全 layout。必须加一层延迟或监听重排触发点。

• 用 setTimeout(() => { ... }, 0) 把读取逻辑推到下一轮事件循环，让浏览器先完成 layout
• 确保子页面 body 无默认边距：body { margin: 0; padding: 0; }
• 优先读 document.documentElement.scrollHeight，它比 body.scrollHeight 更稳定（尤其当内容撑开的是根元素时）

跨域 iframe 只能靠 postMessage 通信

父页面无法访问跨域 iframe 的 DOM，contentDocument 会抛出 SecurityError。唯一合规路径是子页面主动发消息，父页面监听并响应。协议必须约定清楚，否则容易漏收或误收。

• 子页面发送前确认 window.parent 存在，避免独立打开时报错：if (window.parent !== window) { window.parent.postMessage(...) }
• 父页面必须校验 event.origin，不能用 '*' 上生产环境，例如：if (event.origin !== 'https://example.com') return
• 高度值建议带单位（如 { height: '624px' }），避免父页面再做字符串拼接

iframe-resizer 插件怎么避免踩坑

这个库封装了 postMessage + ResizeObserver + 多种高度计算策略，但默认配置在某些场景下会失效，比如子页用了 height: 100% 布局或设置了 overflow: hidden。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 高度计算方法别硬套默认的 bodyOffset，试试 documentElementScroll —— 它读的是 document.documentElement.scrollHeight，对 flex / grid 布局更友好
• 子页面引入 iframeResizer.contentWindow.min.js 必须放在 </body> 前，否则可能因 DOM 未就绪而注册失败
• 父页面初始化时加上 checkOrigin: false（仅调试用），上线前务必关掉，否则跨域伪造消息可篡改 iframe 高度

为什么 ResizeObserver 不能直接观察 iframe 内容

ResizeObserver 只能观察当前文档内的元素，iframe.contentDocument.body 属于另一个文档上下文，直接传进去会报 TypeError: Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element'。

立即学习“前端免费学习笔记（深入）”；

• 正确做法是在子页面内创建 ResizeObserver，监听自身 document.body 或 document.documentElement，变化时再 postMessage 通知父页
• 如果子页内容由 JS 动态插入（如 React 渲染），需确保 ResizeObserver 在组件挂载后才启动，否则可能观察不到首次渲染
• IE11 及以下不支持 ResizeObserver，跨浏览器方案仍得 fallback 到 setInterval 轮询（间隔不建议短于 300ms）

真实项目里最常被忽略的不是技术选型，而是子页面的 CSS 重置和父页面的 origin 校验——这两处一漏，要么高度始终为 0，要么上线后被恶意站点利用。