iframe需HTTP/HTTPS协议且不能file://，必须本地服务器；跨域需目标页CORS头；禁用src为空或about:blank；宽高须CSS控制，优先aspect-ratio实现等比缩放。
iframe 不是“加个标签就能用”的简单元素，直接写 <iframe src="xxx"></iframe> 在现代浏览器里大概率白屏、报错或被拦截——尤其本地双击打开时触发 file:// 协议，跨域限制立刻生效。
src 必须是有效 HTTP/HTTPS URL，且开发阶段不能离线访问
常见错误是本地开发时写 src="./dashboard.html"，然后双击 index.html 打开。此时浏览器走 file:// 协议，所有跨源策略（包括同目录下的 HTML）都会被阻断，控制台报 net::ERR_FAILED 或 Blocked a frame with origin "null"。
- 必须起本地服务器：用
http-server、live-server或 VS Code 的 Live Server 插件，确保地址是http://localhost:8080/index.html这类 - 同域嵌入（如
src="/admin/stats.html"）没问题；跨域嵌入（如src="https://maps.google.com"）需目标页响应头含Access-Control-Allow-Origin，且不违反sandbox策略 - 绝对禁止
src=""或src="about:blank"后再 JS 赋值——Chrome 会提前触发加载并报net::ERR_UNKNOWN_URL_SCHEME
宽高必须用 CSS 控制，别硬编码 width/height 属性
写 width="100%" height="500" 是响应式灾难的起点：移动端缩放失效、父容器无高度时 iframe 塌陷为 0、第三方内容（比如地图）常因固定像素高度截断。
- 删掉所有
width和heightHTML 属性，全交给 CSS - 等比缩放优先用
aspect-ratio: 16/9（Chrome 88+ / Firefox 89+ 支持），比 JS 计算或 padding-top hack 更稳 - 若要兼容老浏览器（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 - Chrome 95+ 对未声明
sandbox的跨域 iframe 会主动降级（如禁用document.write），但别依赖这个“保护”
title 属性不可省，且必须具体描述内容
title="Iframe" 或 title="" 都不满足无障碍（a11y）和 SEO 要求。屏幕阅读器靠它告诉用户“这个框里是什么”，搜索引擎靠它理解嵌入内容语义。
- 写具体功能描述，例如
title="实时销售数据看板"、title="嵌入的客户支持聊天窗口" - 不要用占位符如
title="content"或title="frame" - 如果嵌入的是第三方服务（如 Stripe Checkout），直接复用其官方推荐 title，比如
title="Secure payment form"
真正难的不是怎么写 iframe，而是判断什么时候不该用它——比如能用 Web Components 或 fetch + innerHTML 渲染的同域内容，就别硬套 iframe；而一旦涉及跨域、第三方、不可信来源，sandbox 的权限粒度、postMessage 的消息校验、以及父页对 iframe 加载状态的监听（load 事件不可靠，得结合 iframe.contentDocument 判空），这些细节漏掉一个，线上就可能出问题。
