Responsieve iframes in Chrome 154

Sebastian Benz
Bramus

Gepubliceerd: 16 september 2026

Chrome 154 biedt nu ondersteuning voor responsief formaat iframes , waardoor een <iframe> zichzelf kan aanpassen aan de intrinsieke grootte van het ingesloten document. Dit is ideaal voor het naadloos insluiten van commentaarwidgets van derden, sociale media-integraties met variabele hoogte of elk ander type integratie dat gebruikmaakt van een <iframe> .

Browser Support

  • Chrome: achter een vlag.
  • Rand: achter een vlag.
  • Firefox: niet ondersteund.
  • Safari: niet ondersteund.

Source

Responsief formaat iframes vervangen een veelvoorkomend patroon waarbij ontwikkelaars handmatig de inhoud van een iframe opmeten, de afmetingen via postMessage() verzenden en vervolgens handmatig de grootte van het iframe op de ingesloten pagina aanpassen.

Deze opname toont een reactieformulier dat is ingesloten in een pagina met behulp van een iframe. Wanneer de gebruiker een reactie toevoegt, wordt de hoogte van het iframe in de pagina dynamisch aangepast, waardoor een naadloze visuele ervaring zonder scrollbalken ontstaat.

De grootte van een iframe aanpassen aan de inhoud ervan.

Standaard heeft een iframe een eigen viewport. Als het ingesloten document hoger is dan die viewport, kunnen gebruikers een extra scrollbalk te zien krijgen. Met responsieve iframe-dimensionering kan de pagina waarin het document is ingesloten in plaats daarvan contentgebaseerde dimensionering gebruiken:

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

Het ingesloten document moet zich aanmelden:

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

Hier volgt een volledig voorbeeld:

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

En in /comments.html :

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

De iframe kan nu de hoogte van de ingesloten documentinhoud gebruiken in plaats van zich te gedragen als een viewport met een vaste hoogte.

Gebruik frame-sizing

De nieuwe eigenschap voor het bepalen frame-sizing bepaalt welke afmeting wordt afgeleid van de inhoud van de iframe.

Ondersteunde waarden zijn onder andere:

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

auto behoudt het bestaande gedrag met betrekking tot de grootte van de iframe.

Voor de meeste horizontale schrijfmodi zijn content-height en content-block-size de meest bruikbare waarden voor verticaal uitbreidende embeds.

Je kunt frame-sizing ook combineren met andere CSS-beperkingen:

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

Formaat aanpassen na dynamische inhoudswijzigingen

De browser registreert niet continu elke lay-outwijziging binnen het ingesloten document.

Als de inhoud van de iframe verandert na de initiële lay-out, bijvoorbeeld na het laden van meer reacties of het uitklappen van een paneel, kan het ingesloten document een nieuwe berekening van de afmetingen aanvragen met window.requestResize() .

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

Het is het beste om window.requestResize() aan te roepen vóór de lay-out, nadat alle wijzigingen in het document zijn doorgevoerd. Dit expliciete update-model helpt voorkomen dat er een oneindige resize-loop ontstaat, waarbij het wijzigen van de iframe-grootte de viewport verandert, wat de inhoud verandert, wat de grootte vervolgens weer verandert.

Cross-origin embeds

Responsieve dimensionering kan ook worden gebruikt met iframes van verschillende oorsprongen. Het ingesloten document kan beperken welke oorsprongen zijn toegestaan:

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

Dit beperkt de responsieve dimensionering tot alleen https://publisher.example . Meerdere origins worden gescheiden door een spatie: content="allow-origins=https://publisher1.example https://publisher2.example" .

Voor widgets van derden moet de toegang worden beperkt tot de bronnen die deze nodig hebben. Dit mechanisme vormt een aanvulling op bestaande beveiligingsmaatregelen voor iframes, zoals frame-ancestors -richtlijn van Content Security Policy, die bepaalt welke sites een pagina mogen insluiten.

Progressieve verbetering

Je kunt feature queries gebruiken om een ​​bestaande fallback te behouden voor browsers die geen ondersteuning bieden frame-sizing :

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

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

Als het ingesloten document dynamisch wordt bijgewerkt, kunt u ook de functie requestResize() detecteren: 

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

De bestaande code voor het aanpassen van de grootte van iframes kan daarom als back-up blijven dienen totdat de ondersteuning is uitgebreid.

Probeer het eens.

Probeer responsieve iframe-sizing uit in de volgende demo :