Chrome for Developers 在 2026 年 9 月 16 日介紹 Chrome 154 的 responsive iframe sizing：父頁面可以用 frame-sizing 指定 iframe 依內容尺寸調整，嵌入頁面則要用 responsive-embedded-sizing meta 宣告允許的來源。這不是所有瀏覽器立即共用的通用解法，因此仍要保留 fallback 和版面位移檢查。

先分清楚它解決的是哪一段 iframe 問題#

frame-sizing 主要處理「父頁面不知道嵌入內容應有多高或多寬」這件事。它不會自動替你解決：

iframe 內的登入、權限或 CORS 問題。
內容本身載入失敗、圖片沒有尺寸或字型晚到造成的版面變化。
其他瀏覽器或舊版 Chrome 對新 CSS property 的支援。
父頁面刻意限制高度時的捲動與互動設計。

如果你的需求其實是移動 DOM 節點但保留 iframe 狀態，請先看用 moveBefore() 移動 DOM 並保留狀態；那和 iframe 依內容調整尺寸是不同問題。

最小設定：父頁面加上 frame-sizing#

先在父頁面給 iframe 一個明確的寬度，再選擇要跟隨內容的尺寸：

1
<iframe
2
  class="embed"
3
  src="https://embed.example/article"
4
  title="嵌入文章"
5
></iframe>

1
.embed {
2
  width: 100%;
3
  frame-sizing: content-height;
4
}

content-height 適合寬度已由父頁面決定、但內容高度會變動的文章或元件。官方也列出 content-width、content-inline-size 與 content-block-size 等方向；實際選擇要配合你的 writing mode、版面限制與使用情境，不要把所有 iframe 都套成同一個值。

子頁面必須先 opt-in#

嵌入內容要在載入前宣告允許哪些父頁面使用 responsive sizing。若只在自己的網站嵌入，可以把來源寫得更窄：

1
<head>
2
  <meta
3
    name="responsive-embedded-sizing"
4
    content="allow-origins=https://publisher.example"
5
  />
6
</head>

allow-origins=* 可以用於需要接受多個來源的嵌入服務，但它會放寬允許範圍。若來源集合可預先知道，優先列出明確 origin，並且不要把這個宣告誤當成 iframe 的內容安全政策；frame-ancestors、CSP、登入與資料權限仍要獨立設定。

這個 meta 宣告不能等頁面載入後才由 JavaScript 動態補上來補救。把它放在嵌入文件的 <head>，並讓父頁面以正式的 src 載入，才能讓瀏覽器在初始載入階段取得 opt-in 狀態。

內容變動時用 requestResize 通知#

初次載入以外，嵌入內容可能因展開 FAQ、切換分頁或非同步資料而改變高度。Chrome 官方說明可以在內容更新後呼叫 window.requestResize()：

1
function renderExtraContent(html) {
2
  document.querySelector('#content').insertAdjacentHTML('beforeend', html);
3

4
  if ('requestResize' in window) {
5
    window.requestResize();
6
  }
7
}

這段程式碼是示意範本，重點是把通知放在「內容已更新」的邊界，而不是每個 scroll、resize 或動畫 frame 都呼叫。若你的內容由多個非同步來源組成，可以在一次 render batch 完成後統一通知，避免不必要的尺寸更新。

舊瀏覽器要保留可用的 fallback#

新 property 不應成為 iframe 唯一的可用路徑。可以用 feature query 讓支援的瀏覽器套用 responsive sizing，其他瀏覽器則保留預設高度：

1
.embed {
2
  width: 100%;
3
  min-height: 240px;
4
}
5

6
@supports (frame-sizing: content-height) {
7
  .embed {
8
    frame-sizing: content-height;
9
    min-height: 0;
10
  }
11
}