iFrames responsifs dans Chrome 154

Sebastian Benz
Bramus

Publié le 16 septembre 2026

Chrome 154 est désormais compatible avec les iframes de taille responsive, ce qui permet à un <iframe> de se redimensionner en fonction de la taille intrinsèque de son document intégré. C'est idéal pour intégrer de manière fluide des widgets de commentaires tiers, des intégrations de réseaux sociaux de différentes hauteurs ou tout autre type d'intégration utilisant un <iframe>.

Browser Support

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

Source

Les iFrames de taille responsive remplacent un modèle courant dans lequel les développeurs mesurent manuellement le contenu des iFrames, envoient les dimensions avec postMessage() et mettent à jour manuellement la taille des iFrames dans la page d'intégration.

Cet enregistrement montre un formulaire de commentaires intégré à une page à l'aide d'un iFrame. Lorsque l'utilisateur ajoute son commentaire, la hauteur de l'iFrame à l'intérieur de la page d'intégration est mise à jour de manière dynamique, ce qui crée une expérience visuelle fluide sans barre de défilement.

Redimensionner un iFrame en fonction de son contenu

Par défaut, un iframe possède sa propre fenêtre d'affichage. Si le document intégré est plus haut que cette fenêtre d'affichage, les utilisateurs peuvent obtenir une barre de défilement supplémentaire. Avec le dimensionnement responsif des iFrames, la page d'intégration peut utiliser un dimensionnement basé sur le contenu :

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

Le document intégré doit être activé :

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

Voici un exemple complet :

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

Dans /comments.html :

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

L'iFrame peut désormais utiliser la hauteur du contenu du document intégré au lieu de se comporter comme une fenêtre d'affichage à hauteur fixe.

Utiliser frame-sizing

La nouvelle propriété frame-sizing contrôle la dimension dérivée du contenu de l'iFrame.

Les valeurs autorisées incluent les suivantes :

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

auto conserve le comportement de dimensionnement des iFrames existant.

Pour la plupart des modes d'écriture horizontaux, content-height et content-block-size sont les valeurs les plus utiles pour les intégrations qui se développent verticalement.

Vous pouvez également combiner frame-sizing avec d'autres contraintes CSS :

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

Redimensionnement après des modifications de contenu dynamique

Le navigateur n'observe pas en continu chaque modification de mise en page dans le document intégré.

Si le contenu de l'iFrame change après la mise en page initiale (par exemple, après le chargement de commentaires supplémentaires ou le développement d'un panneau), le document intégré peut demander un nouveau calcul de la taille avec window.requestResize().

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

Il est préférable d'appeler window.requestResize() avant la mise en page, une fois que toutes les modifications ont été apportées au document. Ce modèle de mise à jour explicite permet d'éviter les boucles de redimensionnement, où la modification de la taille de l'iFrame modifie sa fenêtre d'affichage, ce qui modifie son contenu, ce qui modifie à nouveau sa taille.

Éléments intégrés interorigines

Le dimensionnement responsif peut également être utilisé avec des iFrames interorigines. Le document intégré peut limiter les origines autorisées :

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

La taille responsive sera alors limitée à https://publisher.example. Plusieurs origines sont séparées par un espace : content="allow-origins=https://publisher1.example https://publisher2.example".

Pour les widgets tiers, limitez l'accès aux origines qui en ont besoin. Ce mécanisme complète les contrôles de sécurité des iFrames existants, tels que la directive frame-ancestors de la règle relative à la sécurité du contenu, qui contrôle les sites pouvant intégrer une page.

Amélioration progressive

Vous pouvez utiliser des requêtes de fonctionnalité pour conserver un ancien remplacement pour les navigateurs qui ne sont pas compatibles avec frame-sizing :

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

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

Si le document intégré est mis à jour de manière dynamique, vous pouvez également détecter la fonctionnalité requestResize() :

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

Le code de dimensionnement des iFrames existant peut donc rester en tant que solution de secours en attendant que la prise en charge s'étende.

Essayer

Essayez le dimensionnement d'iframe responsif dans la démonstration suivante :