iframe是HTML5中唯一合法的网页嵌入机制，因其内联特性、独立DOM与同源隔离而不可替代；需设src、避免file://协议、用CSS替代废弃属性，并注意Flex/Grid塌陷及跨域高度适配。
只能用 iframe，别试 frame 或 frameset —— 它们在 HTML5 中已彻底废弃，现代浏览器不保证渲染，Chrome 和 Firefox 早已移除支持。
为什么 iframe 是唯一可行方案
HTML5 标准只保留 iframe 作为合法的网页嵌入机制。旧式 frame 必须配合 frameset 使用，且与 body 互斥，无法嵌入到现有页面任意位置；而 iframe 是内联元素，可放在 div、section 甚至 p 里，兼容所有现代布局（Flex/Grid）。更重要的是：它自带独立 DOM、JS 执行环境和同源策略隔离，这是安全嵌入第三方内容（如地图、支付页、广告）的基础。
iframe 最小可用写法与常见错误
最简能工作的写法必须包含 src，否则白屏：
<iframe src="https://example.com"></iframe>
但实际使用中极易踩坑：
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
- 本地开发时用
file://协议加载相对路径（如src="page.html"），多数浏览器直接拒绝加载，显示空白 —— 必须起本地服务（如python3 -m http.server）或改用完整 URL - 没设
width/height，iframe默认宽 300px、高 150px，内容常被裁切 - 忽略
title属性，导致屏幕阅读器无法识别框架用途，违反 WCAG 可访问性要求 - 仍写
frameborder="0"或scrolling="no"—— 这些是 HTML4 属性，HTML5 已废弃，应改用 CSS：style="border: none; overflow: hidden;"
跨域场景下怎么让高度自适应
当 iframe 加载的是不同源页面（如嵌入第三方仪表盘），父页 JS 无法直接读取其 document.body.scrollHeight。此时有两种可靠路径：
- 如果对方页面可控：在其内部加一段脚本，监听
resize并通过window.parent.postMessage()主动上报高度，父页用window.addEventListener('message', ...)接收并设置iframe.style.height - 如果不可控：放弃自动适配，固定高度 +
style="overflow-y: auto;"，或改用srcdoc（仅适用于纯 HTML 片段，且不能跨域） - 注意：不要依赖
onload后立刻取高度 —— 内容可能还在加载字体、图片或执行 JS，需加防抖或轮询
移动端和 Flex/Grid 布局里的塌陷问题
在 display: flex 容器中，iframe 默认会收缩（flex-shrink: 1），导致高度丢失；在 display: grid 中也可能因未设 min-height 而塌成一条线：
- 给
iframe加style="flex-shrink: 0;"或style="min-height: 0;"防止 Flex 塌陷 - 移动端 Safari 需额外加
style="-webkit-overflow-scrolling: touch;"才能让内部滚动顺滑 - 外层容器若设了
overflow: hidden，会把iframe的滚动条一起剪掉，应改用overflow: visible或单独控制
真正麻烦的从来不是写一行 iframe，而是处理它加载失败、跨域限制、焦点管理、打印样式和 SEO 影响 —— 这些细节不显眼，但线上出问题时往往最先暴露。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
