现代浏览器中直接使用<iframe src="xxx">易白屏报错，因file://协议触发跨域限制；必须用HTTP/HTTPS完整URL、起本地服务器、设sandbox安全策略、用CSS控制宽高、添加具体title属性，并审慎评估是否真需iframe。
直接写 <iframe src="xxx"></iframe> 在现代浏览器里大概率白屏、报错或被拦截——尤其本地双击打开时触发 file:// 协议，跨域限制立刻生效。
src 必须是 HTTP/HTTPS 完整 URL，不能是相对路径或 file://
常见错误是开发时写 src="./admin.html"，然后双击 index.html 打开。此时浏览器走 file:// 协议，所有 iframe 加载都会失败，控制台报 net::ERR_FAILED 或 Blocked a frame with origin "null"。
- 必须起本地服务器：用
http-server、live-server或 VS Code 的 Live Server 插件，确保地址形如http://localhost:5500/index.html - 生产环境必须写完整 URL：
src="https://example.com/widget.html"，不能省略协议 - 同域嵌入（如
src="/dashboard.html"）可行，但目标页必须能独立访问——不能依赖父页 JS 渲染，否则 iframe 加载的是空壳 - 绝对禁止
src=""或src="about:blank"后再用 JS 赋值，Chrome 会提前触发加载并报net::ERR_UNKNOWN_URL_SCHEME
宽高必须用 CSS 控制，别碰 width/height HTML 属性
写 width="100%" height="500" 是响应式灾难的起点：移动端缩放失效、父容器无高度时 iframe 塌陷为 0、第三方内容（比如地图）常因固定像素高度截断。
- 删掉所有
width和heightHTML 属性，全交给 CSS - 等比缩放优先用
aspect-ratio: 16/9（Chrome 88+ / Firefox 89+ 支持），比 JS 计算或padding-tophack 更稳 - 要兼容老浏览器（IE / Safari），可用
padding-top: 56.25%+position: absolute布局 -
height="100%"仅在父容器有显式height或min-height时才有效；否则它一定坍缩
sandbox 是安全底线，不是可选配置
不加 sandbox，等于把脚本执行、表单提交、弹窗、DOM 访问权限全开放给嵌入页——哪怕它只是你自家子域名下的页面。
立即学习“前端免费学习笔记（深入）”；
- 默认最严策略：
sandbox=""（空值），此时 iframe 内所有脚本、表单、插件、弹窗全部禁用 - 仅当真需要通信才加权限，例如父子页需
postMessage，可开sandbox="allow-scripts allow-top-navigation" -
allow-same-origin必须慎用——开了它，跨域 iframe 就能绕过同源策略读取父页 DOM -
allow-scripts已隐含禁用音频自动播放，无需额外加allow-media-encryption
title 属性不可省，且必须具体描述内容
title 不是装饰，是无障碍（a11y）和 SEO 的硬性要求。屏幕阅读器会朗读它，搜索引擎也依赖它理解嵌入内容。
- 不能写
title="页面"或留空，得具体，比如title="客户订单管理后台"或title="百度地图门店定位组件" - 缺失
title会导致 Lighthouse 审计失败，影响可访问性评分 - 它和
name不同：name用于target导航，title纯为语义与辅助技术服务
真正难的不是写对标签，而是判断“是否真需要 iframe”——它创建的是独立浏览上下文，不是普通容器。样式隔离、JS 隔离、跨域通信、懒加载失效、移动端滚动卡顿……每个点都可能在上线后突然冒出来。别把它当 div 用，先想清楚代价。
