Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Ao desenvolver aplicações web que integram múltiplos domínios, um dos desafios mais comuns é manter a responsividade dos iframes, especialmente quando seu conteúdo varia em altura. Essa questão se torna ainda mais complexa quando o conteúdo carregado está em domínios distintos, o que impõe restrições severas pelo mesmo política de origem. Neste artigo, abordo uma estratégia prática e aprofundada para resolver esse problema, utilizando a API postMessage, que é uma solução moderna, segura e compatível com diferentes navegadores.
O padrão de segurança do navegador impede que scripts de um domínio acessem o conteúdo ou manipulem elementos de uma página carregada de outro domínio. Assim, métodos tradicionais de ajuste de altura, como leitura do scrollHeight ou offsetHeight do conteúdo interno, não funcionam quando o conteúdo está em domínios diferentes. Como consequência, desenvolvedores precisam buscar alternativas que permitam comunicação segura entre as janelas.
A API postMessage permite que janelas de diferentes origens troquem mensagens de forma segura e controlada. Ela funciona enviando mensagens específicas de uma janela para outra, que podem ser escutadas por event listeners. Essa troca de mensagens permite que a página pai receba informações do iframe, como a altura do seu conteúdo, e ajuste o seu elemento de iframe dinamicamente.
Ao carregar o conteúdo, o script presente na página do iframe calcula sua altura, considerando o conteúdo visível. Após esse cálculo, ele envia uma mensagem para a janela que o carregou, passando essa altura.
// Exemplo de código no iframe
window.onload = function() {
var altura = document.body.scrollHeight. // Envia a altura para a janela pai
window.parent.postMessage({tipo: 'altura', valor: altura}, '*'). }. A página que contém o iframe escuta por mensagens de outros janelas e, ao receber uma mensagem com o tipo esperado, ajusta a altura do iframe correspondente.
// Código na página pai
window.addEventListener('message', function(event) {
// Aqui, é possível validar a origem com event.origin se necessário
if (event.data.tipo === 'altura') {
var iframe = document.getElementById('meuIframe'). iframe.style.height = event.data.valor + 'px'. }
}). event.origin na página que escuta as mensagens, para garantir que a comunicação seja de fontes confiáveis.Embora essa abordagem seja robusta, ela depende de que o conteúdo do iframe esteja preparado para enviar a altura após o carregamento. Para conteúdo dinâmico, pode ser necessário disparar o envio de mensagens após cada atualização do conteúdo, não só no onload. Sem esse critério, a solução pode parecer simples no começo e cara no suporte. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar.
Além disso, em casos onde o conteúdo dentro do iframe muda frequentemente, considere otimizar a frequência de envios para evitar sobrecarga na comunicação. A implementação também deve garantir que o carregamento seja sincronizado, evitando problemas de altura antes do conteúdo estar totalmente renderizado. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois. Sem esse critério, a solução pode parecer simples no começo e cara no suporte.
Imagine uma plataforma de dashboards com widgets externos carregados via iframe de outros domínios. Cada widget calcula sua altura após a renderização e envia essa informação ao container, que ajusta seu tamanho automaticamente. Essa abordagem melhora a experiência do usuário, mantendo a interface limpa e responsiva, sem scrolls internos desnecessários. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco. O valor aparece melhor quando operação, produto e engenharia olham para o mesmo risco.
A utilização do postMessage para ajustar dinamicamente a altura de iframes carregando conteúdo de domínios diferentes é uma solução prática, segura e que funciona na maioria dos navegadores atuais. Embora exija uma coordenação entre o conteúdo do iframe e a página principal, ela oferece maior controle e compatibilidade do que métodos tradicionais baseados apenas no DOM local. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta. Por isso, o recorte precisa considerar manutenção, validação e caminho de volta.
Quem já tentou implementar essa estratégia em produção? Quais dificuldades enfrentaram na validação de mensagens ou na sincronização de carregamento? A decisão fica mais saudável quando o time consegue medir o impacto depois. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. A decisão fica mais saudável quando o time consegue medir o impacto depois. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar. Esse contexto ajuda a separar ganho real de novidade difícil de sustentar.
Sim, o grande cuidado que vejo é na quantidade de mensagens enviadas, principalmente se o conteúdo do iframe é muito dinâmico.
Sempre achei que essa abordagem era a mais segura e eficiente. No meu time, a validação do origin é bem importante pra evitar qualquer risco. Já passou por problemas de sincronização ao fazer muitas mensagens de uma vez?
manda um ae