iframe无法自动撑高是浏览器原生限制，需通过监听+计算+主动设置实现：同源时用onload+scrollheight+余量；跨域时必须用iframe-resizer或postmessage通信；固定比例内容可用css padding-top伪自适应。
iframe 无法自动根据内容撑高，这是浏览器的原生限制 —— 它的 height 默认不响应子文档高度变化。所谓“自动扩容”，本质是**监听 + 计算 + 主动设置**，且必须区分同源和跨域两种情况。
同源 iframe：用 onload + document.body.scrollHeight 最直接
只要父页和 iframe 的 src 是同一协议、域名、端口（比如都是 https://example.com/page.html），就能在父页面里安全读取子页面 DOM 高度。
-
onload事件只保证 iframe 文档加载完成，但不保证所有图片、字体、异步脚本渲染完毕；若子页含延迟渲染内容，scrollHeight可能偏小 - 推荐加一点余量，比如
+ 10或+ 20，避免滚动条闪现 - 需注意子页面
是否有 margin/padding，它们会撑大scrollHeight，导致 iframe 过高 - 示例写法：
<iframe src="content.html" onload="this.height = this.contentDocument.body.scrollHeight + 10"></iframe>
跨域 iframe：必须用 iframe-resizer 或 postMessage
一旦 src 指向不同源（如嵌入第三方地图、支付页），contentDocument 就被浏览器拦截，scrollHeight 读不到 —— 此时硬写 JS 会报 Blocked a frame from accessing a cross-origin frame 错误。
- 最稳妥是用
iframe-resizer：父页引入iframe-resizer.parent.js，子页引入iframe-resizer.child.js，双方通过postMessage通信传递高度 - 不能只在父页加库就完事 —— 子页没加载
child.js，就发不出高度消息，父页永远等不到回调 - 如果子页你完全无法控制（比如嵌入公开的 YouTube 视频页），那根本没法自动扩容，只能固定高度或用 CSS 比例占位
用 CSS 实现“伪自适应”：适合视频、地图等固定比例内容
当内容宽高比稳定（如 16:9 视频、4:3 地图），且你接受“高度不精确匹配内容，只维持比例”时，纯 CSS 是最轻量、无 JS 依赖的方案。
- 核心是利用
padding-top百分比基于父容器宽度计算的特性，配合position: absolute填满占位区域 -
padding-top: 56.25%对应 16:9（9 ÷ 16 = 0.5625），75%对应 4:3（3 ÷ 4 = 0.75） - 外层容器必须设
overflow: hidden，否则 iframe 可能溢出 - 这个方法不读取内容高度，所以完全规避跨域问题，但也不解决文字类内容的动态伸缩需求
真正难的不是“怎么写代码”，而是判断当前场景属于哪一类：内容是否同源？能否修改子页？是否允许固定比例？漏掉这个判断，直接套用 onload 或 resizer，大概率卡在第一步。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
