Responsive iFrames in Chrome 154

Sebastian Benz
Bramus

Veröffentlicht: 16. September 2026

In Chrome 154 wird die Unterstützung für responsively-sized iframes eingeführt. Damit kann ein <iframe> seine Größe basierend auf der intrinsischen Größe des eingebetteten Dokuments anpassen. Das ist ideal, um Kommentar-Widgets von Drittanbietern, Social-Media-Einbettungen mit variabler Höhe oder andere Arten von Einbettungen, die ein <iframe> verwenden, nahtlos einzubetten.

Browser Support

  • Chrome: behind a flag.
  • Edge: behind a flag.
  • Firefox: not supported.
  • Safari: not supported.

Source

Responsiv angepasste iFrames ersetzen ein gängiges Muster, bei dem Entwickler iFrame-Inhalte manuell messen, Abmessungen mit postMessage() senden und die iFrame-Größe auf der Einbettungsseite manuell aktualisieren.

In dieser Aufzeichnung ist ein Kommentarformular zu sehen, das mithilfe eines iFrames in eine Seite eingebettet ist. Wenn der Nutzer seinen Kommentar hinzufügt, wird die Höhe des iFrames auf der Einbettungsseite dynamisch aktualisiert. So entsteht eine nahtlose visuelle Darstellung ohne Scrollbalken.

iFrame an den Inhalt anpassen

Standardmäßig hat ein iFrame einen eigenen Darstellungsbereich. Wenn das eingebettete Dokument höher als dieser Darstellungsbereich ist, wird möglicherweise eine zusätzliche Scrollleiste angezeigt. Bei der responsiven iFrame-Größenanpassung kann die Einbettungsseite stattdessen die inhaltsbasierte Größenanpassung verwenden:

.embed {
  width: 100%;
  frame-sizing: content-height;
}

Das eingebettete Dokument muss aktiviert werden:

<meta name="responsive-embedded-sizing" content="allow-origins=*">

Hier ein vollständiges Beispiel:

<style>
  .embed {
    width: 100%;
    frame-sizing: content-height;
  }
</style>
<iframe class="embed" src="/comments.html" title="Comments">
</iframe>

Und in /comments.html:

<!doctype html>
<html>
  <head>
    <meta name="responsive-embedded-sizing" content="allow-origins=*">
  </head>
  <body>
    ...
  </body>
</html>

Der iFrame kann jetzt die Inhaltshöhe des eingebetteten Dokuments verwenden, anstatt sich wie ein Darstellungsbereich mit fester Höhe zu verhalten.

„frame-sizing“ verwenden

Mit der neuen Property frame-sizing wird gesteuert, welche Dimension aus dem Inhalt des iFrames abgeleitet wird.

Unterstützte Werte sind:

frame-sizing: auto;
frame-sizing: content-width;
frame-sizing: content-height;
frame-sizing: content-inline-size;
frame-sizing: content-block-size;

auto behält das vorhandene Verhalten bei der Größenanpassung von iFrames bei.

Bei den meisten horizontalen Schreibmodi sind content-height und content-block-size die nützlichsten Werte für die vertikale Erweiterung von Einbettungen.

Sie können frame-sizing auch mit anderen CSS-Einschränkungen kombinieren:

.embed {
  width: 100%;
  max-height: 80vh;
  frame-sizing: content-height;
}

Größenanpassung nach Änderungen am dynamischen Content

Der Browser beobachtet nicht kontinuierlich jede Layoutänderung im eingebetteten Dokument.

Wenn sich der Inhalt des iFrames nach dem ersten Layout ändert, z. B. nach dem Laden weiterer Kommentare oder dem Maximieren eines Bereichs, kann das eingebettete Dokument mit window.requestResize() eine neue Größenberechnung anfordern.

async function loadMore() {
  const items = await fetchMoreItems();
  renderItems(items);
  window.requestResize();
}

Es ist am besten, window.requestResize() vor dem Layout aufzurufen, nachdem alle Änderungen am Dokument vorgenommen wurden. Dieses explizite Aktualisierungsmodell trägt dazu bei, Schleifen zu vermeiden, in denen sich durch das Ändern der iFrame-Größe der Darstellungsbereich ändert, wodurch sich der Inhalt ändert, wodurch sich die Größe wieder ändert.

Ursprungsübergreifende Einbettungen

Die responsive Größenanpassung kann auch mit ursprungsübergreifenden iFrames verwendet werden. Das eingebettete Dokument kann einschränken, welche Ursprünge zulässig sind:

<meta
  name="responsive-embedded-sizing"
  content="allow-origins=https://publisher.example">

Dadurch wird die responsive Größenanpassung auf https://publisher.example beschränkt. Mehrere Ursprünge werden durch Leerzeichen getrennt: content="allow-origins=https://publisher1.example https://publisher2.example".

Beschränken Sie bei Drittanbieter-Widgets den Zugriff auf die Ursprünge, die ihn benötigen. Dieser Mechanismus ergänzt bestehende Sicherheitsfunktionen für iFrames wie die frame-ancestors-Anweisung der Content Security Policy, mit der festgelegt wird, welche Websites eine Seite einbetten dürfen.

Progressive Verbesserung

Mit Feature-Abfragen können Sie ein vorhandenes Fallback für Browser beibehalten, die frame-sizing nicht unterstützen:

.widget {
  width: 100%;
  height: 500px;
}

@supports (frame-sizing: content-height) {
  .widget {
    height: auto;
    frame-sizing: content-height;
  }
}

Wenn das eingebettete Dokument dynamisch aktualisiert wird, können Sie auch die Funktion requestResize() erkennen:

if ("requestResize" in window) {
  window.requestResize();
}

Vorhandener iFrame-Größencode kann daher als Fallback beibehalten werden, während die Unterstützung erweitert wird.

Ausprobieren

Hier finden Sie eine Demo für die responsive Größenanpassung von iFrames: