纯 css 方案无法真正实现 iframe 高度自适应，必须用 javascript 动态读取内容高度；同源时需 onload + scrollheight 兜底兼容各浏览器，跨域时须用严格校验的 postmessage 通信。
纯 CSS 方案（aspect-ratio、padding-bottom、height: 100%）在跨浏览器场景下无法真正实现 iframe 高度自适应，必须依赖 JavaScript 动态读取内容高度；兼容性差异主要体现在 DOM 访问时机、scrollHeight 计算逻辑和 postMessage 校验行为上。
同源 iframe：onload + scrollHeight 在各浏览器中的关键差异
Chrome/Firefox/Safari（最新版）都支持 iframe.onload 后立即读 contentDocument.body.scrollHeight，但 IE11 和部分 Android WebView 仍需 fallback 到 contentWindow.document；scrollHeight 值在 Safari 中可能包含字体渲染延迟导致的偏差，需加 setTimeout(..., 16) 微延迟重读。
- 必须用
iframe.contentDocument || iframe.contentWindow.document兜底，不能只写contentDocument -
body要显式设margin: 0; padding: 0;，否则 IE 下scrollHeight多出 8px，Safari 可能多出 1–2 行文字高度 - 空内容时
scrollHeight在 Firefox 中可能是 0，在 Chrome 中是 16，在 Safari 中是 24 —— 必须用Math.max(doc.body.scrollHeight, doc.documentElement.scrollHeight, 300) - 动态内容（如懒加载图片）触发高度变化后，仅靠 onload 不够，得配合
MutationObserver或子页主动发postMessage
跨域 iframe：postMessage 的兼容写法与校验陷阱
IE11 支持 postMessage，但不支持 event.source 和 event.ports；Safari 对 event.origin 校验更严格，若子页跳转后再次发消息，event.origin 可能变成 "null"，直接校验失败。
- 父页监听必须写成
window.addEventListener('message', handler)，不能用window.onmessage = handler（IE11 不兼容） - 子页发消息前要确保
document.readyState === 'complete'，否则 Safari 可能读到未渲染完的scrollHeight - 校验不能只写
if (event.origin !== 'https://xxx.com')，得加if (!event.origin || event.origin === 'null' || event.origin !== 'https://xxx.com') return; - 子页发消息频率要防抖，iOS WKWebView 在快速滚动时可能批量触发
DOMContentLoaded，导致重复发高度
Flex/Grid 布局中 iframe 自适应的浏览器断点行为
Firefox 会把 flex-grow: 1 应用于 display: inline 的 iframe，Chrome 和 Safari 则不会——这导致同一段 CSS 在不同浏览器里 iframe 高度表现不一致。
- 必须给 iframe 显式设
display: block，否则 Flex 布局在 Safari 中失效 -
min-height: 0在 Chrome 和 Firefox 中可让flex-grow正常收缩，但在 Safari 15.6+ 中反而导致高度塌陷，此时应改用height: 0 - 如果父容器用了
grid-template-rows: 1fr，iframe 设height: 100%在 Edge 18 及以下完全无效，必须配合align-self: stretch - 不要混用
flex-grow和style.height，Chrome 会忽略 JS 设置的高度，Safari 则会覆盖 Flex 计算，结果不可控
最容易被忽略的是：所有方案都依赖子页面 DOM 加载完成这个前提，而很多第三方页面（如广告、统计脚本）会在 onload 后异步插入 DOM，这时靠 onload 读到的 scrollHeight 是错的；生产环境必须要求子页在最终内容稳定后主动通知父页，而不是靠父页单方面监听。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
