HTML 的 iframe 还有用吗？sandbox 和 loading 属性怎么配

结论：iframe 没有死，但它已经不再是「页面排版工具」，而是变成了「跨源隔离容器」和「第三方嵌入边界」——今天还在用 iframe 的场景只剩三类：嵌入别人的页面（地图、视频、支付、CodePen）、隔离不可信代码（用户提交的 HTML、广告）、集成改不动的老系统。配置上记住两条硬规则：默认写 sandbox（空值最严格，按需加令牌），非首屏的 iframe 一律加 loading="lazy"。

iframe 还有用吗？哪些场景非它不可

结论：只要涉及「别人的源」或「不可信的代码」，iframe 仍是浏览器唯一的标准隔离方案，fetch + Shadow DOM 替代不了它。

Web Components、Shadow DOM、微前端框架能解决样式和 DOM 隔离，但解决不了同源策略下的安全隔离。iframe 是唯一能给一段代码分配独立源（opaque origin）、独立 JS 执行环境、独立存储空间的 HTML 元素。第三方支付页、YouTube 播放器、Google Maps、富文本里预览用户粘贴的 HTML，这些都必须走 iframe。

真正该放弃 iframe 的是老用法：拿它做整站布局、做导航框架、做「无刷新提交表单」的靶子。这些事在 2024 年应该交给 flex/grid 和 fetch。

sandbox 属性怎么配？为什么不能同时写 allow-scripts 和 allow-same-origin

结论：sandbox 属性只要出现就默认禁止一切——脚本、表单、弹窗、顶层跳转、插件全部锁死，然后你用空格分隔的令牌一项项放开。

最严格写法是空值：

<iframe src="https://example.com/widget" sandbox="" title="外部组件"></iframe>

常见令牌和含义：

• allow-scripts：允许执行 JS
• allow-same-origin：保留原始源，可读写自己的 cookie / localStorage
• allow-forms：允许提交表单
• allow-popups：允许 window.open
• allow-modals：允许 alert / confirm / print
• allow-downloads：允许触发下载
• allow-top-navigation-by-user-activation：用户点击后允许跳转顶层页面

比如要嵌一个需要跑脚本但不需要存储的小游戏：

<iframe src="https://example.com/game"
        sandbox="allow-scripts allow-forms"
        loading="lazy" title="小游戏"></iframe>

最关键的安全红线：不要同时写 allow-scripts 和 allow-same-origin。 如果被嵌入的页面和父页面同源，这两个令牌一起给，iframe 内的脚本就能拿到 parent.document，执行 parent.document.querySelector('iframe').removeAttribute('sandbox') 然后重新加载自己，沙箱直接被拆掉，等于没写。

展示用户提交的 HTML 片段时，用 srcdoc + sandbox="" 是最省事的隔离方案：

<iframe srcdoc="&lt;p&gt;用户内容&lt;/p&gt;" sandbox="" title="用户内容预览"></iframe>

srcdoc 里的引号要转义，且内容体积不宜过大。

loading="lazy" 怎么配？什么时候不该用

结论：loading="lazy" 让 iframe 在接近视口时才发起请求，直接减少首屏的网络和主线程开销，但它对首屏可见的 iframe 有害无益。

<iframe src="https://example.com/embed" loading="lazy"
        width="800" height="450" title="嵌入内容"></iframe>

要点：

1. 取值只有 lazy 和 eager（默认），不用写 eager。
2. 浏览器支持：Chrome / Edge 77 起（2019 年 9 月）、Safari 16.4 起（2023 年 3 月）、Firefox 121 起（2023 年 12 月）。不支持的浏览器会直接按 eager 加载，不会出错，只是没有优化效果。
3. 隐藏的 iframe（display:none）或页面加载后一直不可见的 iframe，可能永远不触发加载，需要靠 IntersectionObserver 手动控制 src 赋值。
4. 首屏就能看到的 iframe 保持默认 eager；页脚地图、评论区、文章底部的嵌入内容一律 lazy。

除了 sandbox 和 loading，还有哪几个属性必须配

结论：title、allow、referrerpolicy 和一条 CSS 规则，是 iframe 上线前的最小检查清单。

• title="描述"：屏幕阅读器靠它说明 iframe 内容，缺失属于无障碍缺陷。
• allow="fullscreen; geolocation"：Permissions Policy，控制 iframe 能用哪些浏览器能力，不写则默认拒绝。
• referrerpolicy="no-referrer"：嵌入第三方时避免泄露当前页面 URL。
• CSS：iframe { width: 100%; aspect-ratio: 16 / 9; border: 0; }，用 aspect-ratio 替代已经过时的 padding-top 百分比 hack 做响应式。
• 服务端侧：自己不想被嵌就用 Content-Security-Policy: frame-ancestors 'self'，比 X-Frame-Options 更细粒度。
• 跨源通信一律走 postMessage，并且必须写明确的 targetOrigin，不要用 '*'。

iframe 的性能代价要清醒：每个 iframe 都是一份独立的 document，会单独加载资源、单独跑 JS 上下文，还会影响父页面的 load 事件。能用组件库解决的 UI 复用自己的代码别用 iframe，只有跨源和不可信代码才交给它。

一句话收束：iframe 从布局工具退场，却把「隔离」这个活干得更专一——默认 sandbox="" 锁死再加令牌，非首屏一律 loading="lazy"，再补齐 title、allow、aspect-ratio，这套配置覆盖了 2024 年 90% 以上的嵌入需求。