src 和 title 是 iframe 唯二必须属性：不填 src 则 iframe 为空壳，无 title 会导致 wcag 2.1 可访问性失败；sandbox 和 allow 共同控制安全权限，缺一不可；loading="lazy" 优化首屏性能但仅作用于 src；name 属性支撑 target 跳转与 js 引用，需规范命名防冲突。
src 和 title 是唯二必须认真对待的属性
不填 src，iframe 就是空壳；不加 title，屏幕阅读器无法识别内容，会直接被 WCAG 2.1 判为可访问性缺陷。很多团队只当 title 是“锦上添花”，其实它是法律合规底线——尤其在政务、教育、金融类站点中。
其他属性按需启用，但别默认全写。比如 frameborder="0" 已被 HTML5 废弃，该用 CSS 的 border: none 替代；scrolling 在现代浏览器中完全失效，滚动行为由 CSS 的 overflow 控制。
sandbox 和 allow 决定 iframe 能不能执行脚本或调用摄像头
第三方 iframe（比如嵌入广告、地图、视频）默认不受信任。不设 sandbox，它就能自由执行 JS、读取父页面 DOM、发起跨域请求——这是典型的 XSS 和点击劫持温床。
-
sandbox不带值时最严格：sandbox等价于禁用所有能力（脚本、表单提交、插件、弹窗等） - 需要脚本？显式放开：
sandbox="allow-scripts" - 还要同源通信？补上：
sandbox="allow-scripts allow-same-origin"（⚠️注意：两者同时存在才允许postMessage通信） - 要调用摄像头？再加：
allow="camera; geolocation"，且必须和sandbox共存才生效
漏掉 allow-same-origin 却想用 contentWindow.document 读子页面？会触发 SecurityError；开了 allow-scripts 却没关 allow-popups？子页面 window.open() 会被拦截。
loading="lazy" 能显著降低首屏加载压力
用户还没滚动到位置，就提前加载一个 2MB 的地图 iframe？没必要。loading="lazy" 让浏览器自动延迟加载，对 LCP（最大内容绘制）指标提升明显。
但要注意：
- 仅对
src加载生效，srcdoc不支持 lazy - Chrome/Edge/Firefox 支持良好，Safari 15.4+ 才开始支持
- 如果 iframe 在视口内但被
display: none或opacity: 0隐藏，仍会触发加载——它只看几何位置，不看渲染状态
name 属性不是摆设，它关系到 target 跳转和 JS 引用
name 是唯一能让 <a href="xxx" target="myframe"></a> 或 <form target="myframe"></form> 正常工作的属性。没有它，链接点击后会在当前页跳转，而不是在 iframe 里加载。
JS 中也依赖它：
-
document.querySelector('iframe[name="myframe"]')比靠id更稳定（id易冲突，name在 iframe 场景下语义更准） -
window.frames['myframe']可直接拿到 iframe 的window对象 - 注意：
name值不能含空格或特殊字符，否则window.frames查不到
真正容易被忽略的是：当多个 iframe 共享同一个 name，window.frames[name] 返回的是第一个匹配项，不是数组——这在动态插入 iframe 时可能引发静默错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
