O Google usa tecnologia de IA na tradução de conteúdos para seu idioma de preferência. As traduções com IA podem ter erros.

Iframes responsivos no Chrome 154

Sebastian Benz

Bramus

Publicado em: 16 de setembro de 2026

O Chrome 154 adiciona suporte a iframes responsivos, permitindo que um <iframe> se ajuste com base no tamanho intrínseco do documento incorporado. Isso é perfeito para incorporar widgets de comentários de terceiros, incorporações de redes sociais de altura variável ou qualquer outro tipo de incorporação que use um <iframe>.

Browser Support

Source

Iframes responsivos substituem um padrão comum em que os desenvolvedores medem manualmente o conteúdo do iframe, enviam dimensões com postMessage() e atualizam manualmente o tamanho do iframe na página de incorporação.

Esta gravação mostra um formulário de comentários incorporado a uma página usando um iframe. Quando o usuário adiciona um comentário, a altura do iframe na página de incorporação é atualizada dinamicamente, criando uma experiência visual perfeita sem barras de rolagem.

Dimensionar um iframe para o conteúdo dele

Por padrão, um iframe tem a própria janela de visualização. Se o documento incorporado for mais alto do que essa janela de visualização, os usuários poderão receber uma barra de rolagem extra. Com o dimensionamento responsivo de iframes, a página de incorporação pode usar o dimensionamento com base no conteúdo:

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

O documento incorporado precisa ativar a opção:

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

Confira um exemplo completo:

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

E em /comments.html:

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

Agora, o iframe pode usar a altura do conteúdo do documento incorporado em vez de se comportar como uma janela de visualização de altura fixa.

Usar `frame-sizing`

A nova propriedade frame-sizing controla qual dimensão é derivada do conteúdo do iframe.

Os valores aceitos são:

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

auto mantém o comportamento de dimensionamento do iframe atual.

Para a maioria dos modos de escrita horizontal, content-height e content-block-size são os valores mais úteis para expansão vertical de incorporações.

Também é possível combinar frame-sizing com outras restrições de CSS:

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

Redimensionamento após mudanças no conteúdo dinâmico

O navegador não observa continuamente todas as mudanças de layout no documento incorporado.

Se o conteúdo do iframe mudar após o layout inicial, por exemplo, depois de carregar mais comentários ou expandir um painel, o documento incorporado poderá solicitar um novo cálculo de tamanho com window.requestResize().

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

É melhor chamar window.requestResize() antes do layout, depois que todas as mudanças no documento forem feitas. Esse modelo de atualização explícita ajuda a evitar loops de redimensionamento em que a mudança do tamanho do iframe altera a janela de visualização, o que muda o conteúdo e, consequentemente, o tamanho de novo.

Incorporações entre origens

O dimensionamento responsivo também pode ser usado com iframes entre origens. O documento incorporado pode restringir quais origens são permitidas:

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

Isso vai limitar o dimensionamento responsivo apenas a https://publisher.example. Várias origens são separadas por espaço: content="allow-origins=https://publisher1.example https://publisher2.example".

Para widgets de terceiros, restrinja o acesso às origens que precisam dele. Esse mecanismo complementa os controles de segurança de iframe atuais, como a diretiva frame-ancestors da política de segurança de conteúdo, que controla quais sites podem incorporar uma página.

Aprimoramento progressivo

É possível usar consultas de recursos para manter um substituto para navegadores que não oferecem suporte a frame-sizing:

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

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

Se o documento incorporado for atualizado dinamicamente, você também poderá detectar recursos requestResize():

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

Portanto, o código de dimensionamento de iframe atual pode permanecer como um substituto enquanto o suporte é ampliado.

Testar

Teste o dimensionamento responsivo de iframes nesta demonstração: