Iframe adattabili in Chrome 154

Sebastian Benz
Bramus

Data di pubblicazione: 16 settembre 2026

Chrome 154 aggiunge il supporto per gli iframe con dimensioni adattabili, consentendo a un <iframe> di dimensionarsi in base alle dimensioni intrinseche del documento incorporato. È perfetto per incorporare senza problemi widget di commenti di terze parti, incorporamenti di social media di altezza variabile o qualsiasi altro tipo di incorporamento che utilizzi un <iframe>.

Browser Support

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

Source

Gli iframe con dimensioni adattabili sostituiscono un pattern comune in cui gli sviluppatori misurano manualmente i contenuti iframe, inviano le dimensioni con postMessage() e aggiornano manualmente le dimensioni dell'iframe nella pagina di incorporamento.

Questa registrazione mostra un modulo per i commenti incorporato in una pagina utilizzando un iframe. Quando l'utente aggiunge il commento, l'altezza dell'iframe all'interno della pagina di incorporamento viene aggiornata dinamicamente, creando un'esperienza visiva fluida senza barre di scorrimento.

Ridimensionare un iframe in base ai suoi contenuti

Per impostazione predefinita, un iframe ha la propria area visibile. Se il documento incorporato è più alto di questa finestra, gli utenti potrebbero visualizzare una barra di scorrimento aggiuntiva. Con il dimensionamento degli iframe adattabile, la pagina di incorporamento può invece utilizzare il dimensionamento basato sui contenuti:

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

Il documento incorporato deve essere attivato:

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

Ecco un esempio completo:

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

E in /comments.html:

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

Ora l'iframe può utilizzare l'altezza dei contenuti del documento incorporato anziché comportarsi come un viewport ad altezza fissa.

Utilizza frame-sizing

La nuova proprietà frame-sizing controlla la dimensione derivata dai contenuti dell'iframe.

I valori supportati includono:

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

auto mantiene il comportamento di dimensionamento dell'iframe esistente.

Per la maggior parte delle modalità di scrittura orizzontale, content-height e content-block-size sono i valori più utili per l'espansione verticale degli incorporamenti.

Puoi anche combinare frame-sizing con altri vincoli CSS:

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

Ridimensionamento dopo le modifiche ai contenuti dinamici

Il browser non osserva continuamente ogni modifica del layout all'interno del documento incorporato.

Se i contenuti dell'iframe cambiano dopo il layout iniziale, ad esempio dopo aver caricato altri commenti o espanso un riquadro, il documento incorporato può richiedere un nuovo calcolo delle dimensioni con window.requestResize().

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

È preferibile chiamare window.requestResize() prima del layout, dopo che sono state apportate tutte le modifiche al documento. Questo modello di aggiornamento esplicito aiuta a evitare i loop di ridimensionamento in cui la modifica delle dimensioni dell'iframe ne modifica l'area visibile, che a sua volta modifica i contenuti, che a loro volta modificano nuovamente le dimensioni.

Incorporamenti multiorigine

Il dimensionamento adattabile può essere utilizzato anche con gli iframe multiorigine. Il documento incorporato può limitare le origini consentite:

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

In questo modo, il dimensionamento reattivo verrà limitato solo a https://publisher.example. Più origini sono separate da uno spazio: content="allow-origins=https://publisher1.example https://publisher2.example".

Per i widget di terze parti, limita l'accesso alle origini che ne hanno bisogno. Questo meccanismo integra i controlli di sicurezza iframe esistenti, come l'istruzione frame-ancestors di Content Security Policy, che controlla quali siti possono incorporare una pagina.

Potenziamento progressivo

Puoi utilizzare le query sulle funzionalità per mantenere un fallback esistente per i browser che non supportano frame-sizing:

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

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

Se il documento incorporato viene aggiornato dinamicamente, puoi anche rilevare le funzionalità requestResize():

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

Il codice di ridimensionamento iframe esistente può quindi rimanere come fallback man mano che il supporto si espande.

Prova

Prova il dimensionamento degli iframe responsivi nella demo seguente: