# Chrome 154 支持响应式 iframe

> Chrome 154 让 iframe 在双方明确同意后按嵌入内容调整尺寸，并提供动态更新、origin 限制与兼容回退路径。

Chrome 154 支持按内部文档的固有尺寸（intrinsic size）确定 `<iframe>` 的一个维度，但嵌入双方都要明确启用。Chrome for Developers 在 2026 年 9 月 16 日介绍了这项功能。外层页面设置 CSS `frame-sizing`，内部文档设置 `responsive-embedded-sizing` meta 值；内容变化后，内部文档可以调用 `window.requestResize()` 请求重新计算
（[Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)）。

<span id="双方共同控制尺寸"></span>

## 内外文档共同启用

iframe 通常拥有自己的 viewport。当内部文档比该 viewport 高时，frame 可以显示滚动条，而不是
扩展到容纳文档。CSSWG explainer 把响应式 iframe 尺寸描述为一种按内容参与布局的方式，同时保留
同源与跨源 frame 提供的文档隔离。设计要求嵌入 frame 的页面和 frame 内文档分别采取动作
（[CSSWG 响应式 iframe explainer](https://github.com/w3c/csswg-drafts/blob/main/css-sizing-4/responsive-iframes-explainer.md)）。

嵌入页面在 iframe 元素上应用 `frame-sizing`。Chrome 的文章列出 `auto`、`content-width`、
`content-height`、`content-inline-size` 与 `content-block-size`。`auto` 保留既有 iframe 尺寸行为；
其他值选择由内部文档提供的物理或逻辑维度，嵌入页面施加在 iframe 上的其他 CSS 约束仍会参与布局
（[Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)）。

内部文档通过 name 为 `responsive-embedded-sizing` 的 meta 元素选择加入。MDN 将这个值描述为：
允许文档与 parent 分享自身 layout size，使 `frame-sizing` 能使用该尺寸。Chrome 的文章还指出，
meta 元素必须在文档加载时已经存在，不能在加载完成后动态插入再激活功能
（[MDN，responsive-embedded-sizing](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing)）。

这种双重同意把元素控制权与内部文档的许可分开。CSSWG explainer 表示，该设计保留现有内容的
向后兼容性，以及跨源内容既有的隐私与安全保证。没有匹配的双方设置时，既有 iframe 继续采用原有
尺寸行为，而不是向嵌入方暴露内容尺寸
（[CSSWG 响应式 iframe explainer](https://github.com/w3c/csswg-drafts/blob/main/css-sizing-4/responsive-iframes-explainer.md)）。

内部文档可以限制哪些 parent origin 能收到尺寸。Chrome 示例在 meta 的 content 值中使用
`allow-origins=`，既可写一个 origin，也可写以空格分隔的多个 origin。文章建议第三方 widget 只列
出确有需要的 origin；通配符允许每个嵌入 origin，显式列表则缩小尺寸披露范围
（[Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)）。

origin 列表不替代既有嵌入控制。Chrome 把它描述为 CSP `frame-ancestors` 的补充，后者控制哪些
站点可以嵌入该文档。CSSWG explainer 也讨论了 `frame-ancestors`：如果恶意嵌入页面能观察跨源
frame 的布局尺寸，这项指令可以限制能够执行观察的嵌入方
（[Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)）。

## 初始尺寸与后续变化

初次尺寸交换与文档加载相连。CSSWG explainer 表示，当选择加入的 meta 元素在内部文档的 `load`
事件发生时已经存在，嵌入页面会收到一个 natural dimension。iframe 的 `frame-sizing` 值让该尺寸
与嵌入页面提供的其他 HTML 和 CSS 约束共同参与布局
（[CSSWG 响应式 iframe explainer](https://github.com/w3c/csswg-drafts/blob/main/css-sizing-4/responsive-iframes-explainer.md)）。

浏览器不会持续观察后续布局变化。Chrome 的作者写道，浏览器不会观察内部文档中的每一次 layout 变化。
代码增加内容、展开面板或以其他方式改变布局后，可以在 frame 内调用 `window.requestResize()`，
请求重新计算尺寸。MDN 也把该方法描述为内部文档改变后用于动态更新的路径
（[Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)）。

Chrome 建议先完成文档变更，再在 layout 之前调用 `requestResize()`。文章把显式更新模型与避免
resize loop 联系起来：frame 尺寸改变可能改变内部 viewport，随后改变内容布局，再次改变请求尺寸。
因此，该方法是由应用控制的一次请求，不是跟踪每个 mutation 的通用 observer
（[Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)）。

CSSWG explainer 记录了初始设计采用一次性尺寸计算的原因。它列出 frame 尺寸变化、CLS、性能成本
与潜在无限布局循环等顾虑，因此在 load 时计算 natural size，而不是自动响应后续所有内容和样式
变化。explainer 的 future extensions 曾把 JavaScript 重新布局请求写作潜在扩展；Chrome 154
交付的功能已经用 `requestResize()` 承担这个显式角色
（[CSSWG 响应式 iframe explainer](https://github.com/w3c/csswg-drafts/blob/main/css-sizing-4/responsive-iframes-explainer.md)）。

<span id="这对-pwa-开发者为什么重要"></span>

## 自动调整 iframe 尺寸对布局的影响

嵌入式表单、评论和交互示例可以改变高度，却不属于应用外壳所在的文档。Chrome 的文章表示，旧有
模式需要脚本测量 iframe 内容、用 `postMessage()` 传递尺寸，再由 parent 更新 iframe。新的协议
把初始尺寸交换放进 CSS 与文档 metadata，同时为后续内容变化保留显式方法
（[Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)）。

这项变化并没有消除回退尺寸设计。Chrome 文档给出 `@supports (frame-sizing: content-height)`
模式：feature query 外保留固定高度，支持时再切换到按内容确定尺寸。它还示范了在调用前检测
`requestResize`。既有 iframe 尺寸代码因而可以继续服务不支持该功能的 user agent
（[Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)）。

原始报道记录了 Chrome 154 的支持，并链接 Firefox 与 Safari 的开放 bug。MDN 把
`responsive-embedded-sizing` 标为 experimental 与非 Baseline，理由是部分广泛使用的浏览器不
支持它。这些来源支持渐进增强，却不支持无条件用新属性替换每一种成熟的 iframe 方案
（[Chrome 154 中的新功能](https://www.bram.us/2026/09/23/responsive-iframes/)）。

即使在支持功能的浏览器里，布局稳定性仍是产品问题。Chrome 警告，内部文档晚于 host document
加载时，frame 可能推动周围内容；当响应式 iframe 出现在首个 viewport 时，这可能对 Core Web
Vitals 产生负面影响。最大高度或预留空间会改变取舍，但合适约束取决于被嵌入的实际内容
（[Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)）。

该功能也把职责写得更清楚。嵌入方选择是否让某个 frame 维度来自内容，并保留自己的 CSS 约束；
内部文档选择是否披露尺寸，并可限制合格的 parent origin；frame 内代码选择哪些后续变化值得重新
计算。把三项决定分开，可以避免把 iframe 元素的控制权误当成对内部文档的控制权
（[MDN，responsive-embedded-sizing](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing)）。

一次渐进式部署可以保留已知高度，在 feature query 内增加 `frame-sizing`，让选择加入的 meta 在
内部文档加载时就存在，并保护性检测 `requestResize()`。这个顺序遵循 Chrome 的 progressive
enhancement 示例，让不支持的 user agent 留在原路径，也为团队提供在视觉显著区域启用内容尺寸前
测量布局移动的位置（[Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)）。

安全审查需要分别覆盖「谁能嵌入」和「谁能收到尺寸」。显式 `allow-origins` 列表控制后者，
`frame-ancestors` 控制前者。CSSWG explainer 警告，可观察的跨源尺寸可能泄露 frame 内容信息，
所以需要内部文档主动启用，并限制 origin
（[CSSWG 响应式 iframe explainer](https://github.com/w3c/csswg-drafts/blob/main/css-sizing-4/responsive-iframes-explainer.md)）。

Chrome 154 带来的实际变化很收敛：支持的 frame 得到一条由双方同意、可显式更新的内容尺寸路径。
它不会让 parent 读取 iframe DOM，不会把后续每次布局变化变成自动通知，也不会消除跨浏览器回退
需求。这些限制让应用可以逐步采用，不必一次重写全部 iframe 方案
（[Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)）。

## 站内相关条目

- [Platforms](/zh/reference/platforms/)：平台模型与术语。
- [Baseline 2026](/zh/reference/platforms/baseline-2026/)：2026 Baseline 集合。
- [By browser](/zh/compatibility/by-browser/)：各浏览器的兼容性数据。

## 待核实

- Firefox 或 Safari 会在哪些发布版本支持响应式 iframe 尺寸，尚未确认。
- 在形成更广泛互操作性之前，属性、meta 值或方法是否变化，尚未确认。
- 特定 PWA、iframe 与预留空间策略产生多少布局移动，需要测量，尚未确认。
- 第三方 widget 应采用怎样的 `allow-origins` 列表，取决于其部署关系，尚未确认。
- 嵌套响应式 frame 是否会受到更多实现限制，尚未确认。
- 该功能何时能满足 Baseline 条件，尚未确认。

## 参考来源

- [Chrome 154 中可自动适应内容的 iframe](https://www.bram.us/2026/09/23/responsive-iframes/)（bram.us）
- [Chrome 154 响应式 iframe](https://developer.chrome.com/blog/responsive-iframes)（developer.chrome.com）
- [响应式 iframe explainer](https://github.com/w3c/csswg-drafts/blob/main/css-sizing-4/responsive-iframes-explainer.md)（github.com）
- [`responsive-embedded-sizing` meta 值](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/responsive-embedded-sizing)（developer.mozilla.org）