iframe高度无法靠css自适应，必须用javascript动态读取真实内容高度并设置style.height；同源时用onload+scrollheight（需重置body边距、兜底最小高度、清空再设值），跨域时强制使用严格校验的postmessage通信。

iframe 高度无法靠 CSS 自适应内容，必须用 JavaScript 动态读取真实内容高度并设置 style.height——所有纯 CSS 方案（height: 100%、aspect-ratio、padding-bottom）都只是视觉模拟，实际会裁剪、留白或错位。

同源 iframe：onload + scrollHeight 是唯一可靠起点

前提是 src 与父页协议、域名、端口完全一致。不能在 DOM 就绪前读取，也不能忽略子页默认样式干扰：

• iframe.onload 触发后，需等待浏览器完成重排再取高，加 setTimeout(() => { ... }, 0) 更稳妥
• 优先读 document.documentElement.scrollHeight，fallback 到 body.scrollHeight，兼容 IE
• 子页 body 必须重置：margin: 0; padding: 0;，否则多出 8–16px
• 空内容时 scrollHeight 极小（如 16px），要兜底：Math.max(height, 300)
• 高度可能缩小（如收起 accordion），设新值前先清空：iframe.style.height = ''

跨域 iframe：postMessage 不是可选优化，是强制路径

浏览器直接拦截 contentDocument 访问，报 SecurityError: Blocked a frame from accessing a cross-origin frame。唯一合法方式是子页主动上报：

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

• 子页必须等 window.onload 或 DOMContentLoaded 后再发消息，确保 scrollHeight 准确
• 父页接收时，event.origin 必须严格校验，if (event.origin !== 'https://trusted.com') return，不能写 '*'
• 子页若用 Vue/React，需在 mounted 或 useEffect 中发消息，避开 SSR 阶段
• 父页需确认 event.source === iframe.contentWindow，防伪造来源

MutationObserver 和 ResizeObserver 不解决根本问题

它们监听的是 DOM 变化或元素尺寸变化，但对 iframe 本身不适用：

• MutationObserver 无法挂载到跨域 iframe 的 body 上；同源时能用，但需手动防抖，且首次加载仍依赖 onload
• ResizeObserver 监听的是 iframe 元素自身容器的大小变化，不是内容高度变化；它不会响应子页内 appendChild 或字体放大等行为
• 移动端软键盘弹出时 viewport 高度压缩，这两者都无感知，必然错位

为什么 aspect-ratio / padding-bottom / height: 100% 全部失效

这些方案本质是“按比例撑开一个空盒子”，和内容真实高度无关：

• aspect-ratio: 16/9 只根据父容器宽度推算高度，子页加一行文字就溢出或留白
• padding-bottom: 56.25% 是固定百分比，软键盘弹出、动态内容展开后完全失准
• height: 100% 失效是因为父容器（html、body）默认高度为 auto，没有继承链
• 即使强行给整条链设 height: 100vh，也只保证满屏，不保证贴合内容底部

最易被忽略的一点：很多开发者以为“设了 onload 就万事大吉”，却没处理子页 body 默认边距、空内容塌陷、高度回退这三类边界情况——它们在测试环境不显，在生产环境集中爆发。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！