iframe不是可选技巧而是绕不开的嵌入方案，但直接写易致白屏、跨域报错、移动端异常、SEO归零或被拦截；必须用本地服务器访问确保http/https协议，慎用空src、硬编码宽高，优先CSS控制尺寸，启用sandbox最小权限，必设具体title以满足a11y与SEO。
iframe 在 index.html 中不是“可选技巧”，而是实际项目里绕不开的嵌入方案——但直接写 <iframe src="..."></iframe> 很大概率会出问题：白屏、跨域报错、移动端缩放异常、SEO 友好性归零、甚至被现代浏览器拦截。
src 属性必须是有效 URL，且注意协议与路径写法
常见错误是本地开发时用相对路径却没起服务，比如：<iframe src="./dashboard.html"></iframe> 在双击打开 index.html 时触发 file:// 协议，导致跨源限制或资源加载失败。
- 开发阶段务必通过本地服务器访问（如
http-server、live-server或 VS Code Live Server 插件），确保协议为http://或https:// - 同域嵌入用相对路径没问题；跨域嵌入必须确认目标页明确允许（如响应头含
Access-Control-Allow-Origin: *，且iframe自身不违反sandbox策略） - 避免写空
src（如src=""或src="about:blank"后又用 JS 动态赋值），某些浏览器会提前触发加载并报net::ERR_UNKNOWN_URL_SCHEME
width/height 不设固定像素，优先用 CSS 控制尺寸
硬编码 width="100%" height="500" 在响应式页面中极易导致横向溢出或高度塌陷，尤其在嵌入第三方内容（如地图、视频）时。
- 把
width和height属性全删掉，改用 CSS：style="width: 100%; aspect-ratio: 16/9; max-height: 600px;" - 需要等比例缩放时，
aspect-ratio比 JS 计算更可靠；若需兼容老浏览器，可用 padding-top 百分比 hack（但仅限块级容器包裹iframe） - 移动端慎用
height="100%"：父容器若无显式高度，iframe高度会坍缩为 0
sandbox 属性不是摆设，不加可能被 XSS 利用
嵌入任何第三方内容（哪怕是自家子域名）都默认开启沙箱最安全。不加 sandbox，等于把脚本执行权、弹窗、表单提交等能力全开放给嵌入页。
立即学习“前端免费学习笔记（深入）”；
- 最小权限原则：
sandbox="allow-scripts allow-same-origin"仅当确实需要 DOM 通信时才加allow-same-origin；否则去掉它，强制同源策略生效 - 禁止自动播放音频：
sandbox="allow-scripts"已隐含禁用autoplay，无需额外加allow-media-encryption - Chrome 95+ 对未声明
sandbox的跨域iframe会降级处理（如禁用document.write），但行为不统一，别赌浏览器宽容度
title 属性必须写，且不能为空字符串
无障碍访问（a11y）和 SEO 都依赖它。title 不只是提示文字，是屏幕阅读器识别 iframe 内容类型的唯一依据。
- 值要具体，比如
title="客户支持聊天窗口"，而不是title="iframe"或title="" - 如果嵌入的是 PDF，可写
title="用户手册（PDF 格式）"；如果是视频，写title="产品演示视频" - 缺失
title会导致 Lighthouse 审计失败，且部分企业内网安全策略会直接屏蔽无title的iframe
真正麻烦的从来不是怎么写 iframe，而是怎么让它在不同上下文里不崩——跨域通信要检查 postMessage 的 origin，懒加载要配合 loading="lazy" 但避开 Safari 15.4 之前的 bug，而 srcdoc 虽好，却无法触发第三方分析脚本。这些细节，一个没对上，index.html 里的那个小窗口就真成“黑盒”了。
