要点：body.scrollHeight 与 documentElement.scrollHeight 在不同 doctype 下表现不同，取最大值更稳；load 触发时内部图片可能还没加载完，高度会偏小。

三、同源增强：ResizeObserver 持续跟随

frm.addEventListener('load', () => {
  const doc = frm.contentDocument;
  resize();
  new ResizeObserver(resize).observe(doc.body);
});

内部元素尺寸变化、图片加载完成、字体渲染结束都会触发，比“定时轮询高度”省资源得多。老环境回退可用 setInterval(resize, 500)，但要注意页面隐藏时停掉。

四、跨域方案：postMessage 上报（标准做法）

内层页面（被嵌入方）加：

// child.html
function post() {
  const h = Math.max(document.body.scrollHeight,
                     document.documentElement.scrollHeight);
  parent.postMessage({ type: 'IFRAME_HEIGHT', h }, '*');
}
window.addEventListener('load', post);
new ResizeObserver(post).observe(document.body);

外层页面（嵌入方）接收：

// parent.html
const frm = document.getElementById('frm');
window.addEventListener('message', e => {
  if (e.origin !== 'https://child.example.com') return;   // 必须校验来源
  if (e.data && e.data.type === 'IFRAME_HEIGHT') {
    frm.style.height = Math.min(e.data.h + 20, 4000) + 'px'; // 加缓冲与上限
  }
});

两个安全细节：① 父页面一定要校验 e.origin，否则会接受任意站点的消息；② 子页面 postMessage 的 targetOrigin 生产环境要写具体域名而不是 '*'。

五、高度回缩与空白抖动处理

• 内部展开/收起内容后变矮：ResizeObserver 会自动上报新高度；若用 onload 一次性计算，则需要手动重算。
• 图片加载完高度突增：给内部 img 预设 width/height 或 aspect-ratio，减少布局位移（CLS）。
• 字体加载延迟：监听 document.fonts.ready.then(post) 再上报一次。
• 兜底样式：外层设 min-height 与 overflow:hidden，万一计算失败也不会露出双层滚动条。

六、更多思路：能不能不用 iframe

iframe 自适应本质上是在和浏览器安全模型对抗。如果内层内容你能控制，更优解通常是：用 fetch 拿 HTML 片段插入当前页（同源，样式统一，无高度问题）、用 Web Components / 前端框架组件嵌入，或用 <script> 方式加载小工具（早期广告位常用）。只有内层是“完全独立的第三方页面”时，才值得上 iframe + postMessage。

七、常见问题 FAQ

问：能不能靠给 iframe 设 scrolling="no" 解决？
答：只是隐藏了内部滚动条，内容会被裁掉，不算自适应，且该属性已废弃。

问：height:100% 行不行？
答：100% 依赖父容器固定高度，父容器是自动高度时无效，仍会出现外层滚动条。

问：只改父页面能否让跨域 iframe 自适应？
答：不能，必须内层页面配合 postMessage；内层不可控时可退化为“固定高度 + 允许内部滚动”，并给内部页面加锚点导航。

结论记忆：同源 → onload 取 scrollHeight 最大值 + ResizeObserver；跨域 → 内层 ResizeObserver 上报 + 外层校验 origin 后设高；能不用 iframe 就不用。另外记得给内部图片预设比例，避免高度二次变化带来页面抖动。

• 前端
• HTML
• iframe