15.11.2024

Auto-Espaçamento da Altura de um iFrame sem Barras de Rolagem em HTML

Resumo Rápido

Para ajustar dinamicamente o tamanho do seu iframe, utilize window.postMessage. Na página pai, configure um evento onload para receber mensagens sobre a altura. Dentro do iframe, envie uma mensagem com a sua altura atual de volta para a janela pai após cada carregamento de conteúdo.

Modelo para a Página Pai:

<iframe src="content.html" id="iframe" onload="redimensionarIframe(this)" style="width:100%;"></iframe>
<script>
function redimensionarIframe(iframe) {
  window.addEventListener('message', (event) => {
    if (event.origin === "https://fontedeconfianca.com") {
      iframe.style.height = event.data + 'px';
    }
  }, false);
}
</script>

Conteúdo de Exemplo para o iFrame (inner.html):

<script>
function enviarAltura() {
  var altura = document.documentElement.scrollHeight;
  parent.postMessage(altura, "https://paginapai.com");
}
window.onload = enviarAltura;
</script>

Substitua https://fontedeconfianca.com e https://paginapai.com pelos URLs de seu domínio, levando em consideração as políticas de segurança. Usando esse método, seus iframes se ajustarão perfeitamente à altura do seu conteúdo, como se fossem feitos sob medida.

Redimensionamento de iFrame entre Domínios

Gerenciar o tamanho de iframes hospedados em diferentes domínios pode ser uma tarefa desafiadora devido a restrições de segurança. Nesses casos, a biblioteca iframe-resizer torna-se um ativo inestimável, oferecendo uma solução elegante e segura para manipular tamanhos de iframes.

Redimensionamento Seguro

Para um ajuste seguro das alturas dos iframes, aplique o atributo sandbox com a flag allow-same-origin. Isso ajuda o iframe a se comportar de forma semelhante à página pai, mantendo a segurança, facilitando assim o processo de redimensionamento.

Visualização

Imagine que a janela (🖼️) corresponde perfeitamente ao tamanho de quadros de diversas dimensões (🎨):

Inicialmente: [🖼️ com 🎨]

Sem Barras de Rolagem: O quadro se ajusta ao tamanho das pinturas.

Redimensionando: [🖼️🔽🎨] ➡️ [🖼️🔼🎨]
# O quadro (🖼️) ADAPTA-SE ao tamanho da imagem (🎨) - não é incrível!

De forma semelhante, o iframe ajustará automaticamente sua altura para se adequar ao seu conteúdo!

Gerenciando Mudanças no Conteúdo do iFrame

Tratamento de Conteúdo Dinâmico

Se o conteúdo de seus iframes muda frequentemente, como uma hiperatividade, usar manipuladores de eventos padrão como onload pode ser ineficiente. Nesse caso, a biblioteca iframe-resizer é especialmente útil, pois ajusta automaticamente a altura em resposta a mudanças no DOM.

Dica Profissional - Estratégia da "Altura Zero"

Use este truque simples: antes de calcular a nova altura do iframe, primeiro defina a altura atual como '0px'. Isso garante que apenas o conteúdo seja levado em conta ao calcular a altura de rolagem, excluindo espaço extra proveniente de conteúdo anterior mais volumoso:

iframe.style.height = '0px';  
iframe.style.height = iframe.contentWindow.document.body.scrollHeight + 'px'; 

Requisitos Específicos do Navegador

Cada navegador possui suas peculiaridades quando se trata de redimensionar iframes, especialmente ao usar estilos e scripts complexos. Portanto, é importante realizar testes em diferentes navegadores, incluindo o Safari, para garantir que os iframes sempre se comportem corretamente!

Mantendo a Ordem

Para um iframe visualmente atraente, assegure-se de remover bordas padrão e barras de rolagem, definindo o atributo frameborder como 0 e scrolling como auto. Essa atenção aos detalhes é crucial para a integração harmoniosa do iframe na página pai!

Responsabilidade de um iFrame "Comportado"

Mantenha Limpo com Scripts Externos

Para garantir que os scripts funcionem de forma eficiente e mantenham o código limpo, evite incluir JavaScript diretamente no HTML. Em vez disso, use scripts e classes externas para gerenciar o redimensionamento de iframes que mudam dinamicamente.

Se Preferir jQuery

Os fãs de jQuery devem definir a altura do iframe de acordo com seu conteúdo. Isso é adequado se o conteúdo do iframe estiver no mesmo domínio:

$('#iframe').on('load', function() {
  $(this).height($(this).contents().find("body").height());
});

Tornando Responsivo

Para garantir o escalonamento correto do iframe em diferentes tamanhos de tela, defina sua largura em porcentagens e permita que a altura se ajuste automaticamente ao conteúdo. Isso tornará o iframe responsivo e conveniente para dispositivos de todos os tamanhos!

Recursos Úteis

1. Vídeo de Largura Fluida | CSS-Tricks
2. <iframe>: O Elemento de Quadro Inline | MDN
3. Redimensionar largura e altura do iFrame - Stack Overflow
4. Tag HTML iframe - W3Schools
5. iFrames Responsivos com jQuery · GitHub
6. Conteúdo Incorporado em um iFrame Responsivo — Smashing Magazine
7. GitHub - davidjbradshaw/iframe-resizer

Video

Navigation