iframe高度不自适应需分场景解决：同域用contentDocument.scrollHeight动态设高；跨域必须postMessage通信；Flex/Grid中需设置flex-shrink:0或minmax(0,1fr)并确保宽高100%；移动端要加-webkit-overflow-scrolling:touch并开放缩放；加载失败靠超时机制降级。
iframe 嵌入页面时高度不自适应怎么办
直接写 <iframe src="page.html"> 几乎必然导致内容被截断或出现双滚动条。浏览器默认给 iframe 设定固定宽高（通常 300×150），且它不会自动感知内部文档高度变化。
解决核心是：让父页面主动获取子页面 document.body.scrollHeight，再动态设置 iframe 的 height 样式。但跨域时无法读取子页面 DOM —— 这是最大限制。
- 同域场景可用
iframe.contentDocument+scrollHeight获取真实高度 - 跨域场景必须依赖
postMessage通信：子页加载完后主动发消息告诉父页“我的高度是 XXX” - 别用
onload直接设高：子页内可能有异步渲染（如 Vue/React 组件、图片懒加载），需监听DOMContentLoaded或加延时兜底
iframe 在 Flex/Grid 布局中塌陷或溢出
iframe 是替换元素（replaced element），默认行为和 img 类似，在 Flex 容器中容易被压缩为 0 高度，或在 Grid 中撑破容器。
关键要显式控制其尺寸行为：
立即学习“前端免费学习笔记（深入）”；
- Flex 容器中给
iframe加flex-shrink: 0防止被压缩 - Grid 容器中避免只写
grid-template-rows: auto，改用minmax(0, 1fr)或设定明确行高 - 始终配合
width: 100%和height: 100%（前提是父容器有确定高度） - 慎用
object-fit：它对iframe无效，仅适用于<img>和<video>
移动端 iframe 滚动卡顿与缩放失效
iOS Safari 对 iframe 的滚动优化极差，尤其嵌入长页面时易卡顿；同时默认禁用双指缩放（user-scalable=no 实际由父页 <meta name="viewport"> 控制，但 iframe 内部 viewport 不生效）。
实操要点：
- 给
iframe外层加overflow: auto+-webkit-overflow-scrolling: touch（仅 iOS 有效） - 移除父页
<meta>中的user-scalable=no，否则 iframe 内容无法缩放 - 避免在 iframe 内使用
position: fixed：iOS 下会脱离 iframe 视口定位 - 若需平滑滚动，子页自身需启用
scroll-behavior: smooth，父页不能代劳
iframe 加载失败时如何降级显示提示
iframe 加载失败不会触发常规 JS 错误事件，onerror 属性在多数浏览器中不生效（Chrome/Firefox 已废弃支持），唯一可靠方式是监听 load 事件 + 超时判定。
- 用
setTimeout设 5–8 秒超时，未触发load就认为失败 - 失败后可切换为
<div>显示错误文案，或插入备用链接：<a href="xxx.html" target="_blank">点击查看原内容</a> - 不要依赖
iframe.contentWindow.location.href判定是否加载成功：跨域时抛错，同域时可能返回"about:blank"即使加载中 - 服务端可配合返回 HTTP 状态码（如 404），但前端无法直接捕获 —— 必须靠超时机制兜底
真正麻烦的从来不是怎么写 iframe，而是它把两个独立执行上下文硬绑在一起：样式隔离、脚本隔离、事件隔离、滚动链路断裂……这些边界问题在开发时容易忽略，上线后才集中爆发。
