Entendendo os iFrames e seu uso

Publicados: 2022-04-06

Os iFrames são comumente usados para incorporar conteúdo em um site. Eles podem ser super úteis, mas você também pode ter problemas com a exibição correta do conteúdo. Neste artigo, veremos com mais detalhes o que são exatamente os iFrames, como usá-los e como solucionar quaisquer problemas que você possa encontrar.

Vamos pular para isso.

O que exatamente é um iFrame ?

iFrame é a abreviação de 'Inline Frame'. Sua finalidade é incorporar conteúdo HTML dentro de outro conteúdo HTML e exibi-lo como um elemento de página da web.

O conteúdo da fonte incorporada aparece como se fizesse parte do layout do seu site, exceto que não é. Pode ser outra página da web, um documento, um vídeo ou outros tipos de mídia interativa. Um uso comum para iFrames é incorporar coisas como vídeos do YouTube.

Os iFrames são uma tag HTML e existem há muito tempo, tendo sido introduzidos em 1997. Apesar de sua idade, eles ainda são comumente usados e são suportados por todos os navegadores modernos.

Como usar iFrames

Para criar um iFrame simples, você deve usar o elemento HTML <iframe> e definir a fonte no atributo src . Para tentar, crie um arquivo html, por exemplo, index.html . Em seguida, abra-o com seu editor favorito e insira o seguinte código:

 <!DOCTYPE html> <html> <body> <h1>This is an iframe</h1> <iframe src="http://www.example.com"> </iframe> </body> </html>

Agora, se você abrir o arquivo com um navegador, verá algo assim:

Como você pode ver, o tamanho padrão do iframe não inclui toda a largura do conteúdo incorporado (neste caso, uma página da Web), portanto, uma barra de rolagem aparece automaticamente para permitir que você navegue dentro da janela.

Agora vamos definir a largura e a altura do iFrame:

 <!DOCTYPE html> <html> <body> <h1>This is an iframe</h1> <iframe src="http://www.example.com" width="480" height="320" > </iframe> </body> </html>

Atualize a página e veja como ela está agora.

Existem muitas outras opções que podem ser configuradas ao usar iFrames. Os mais populares e úteis são:

name : Podemos definir o nome do Fframe para que possamos usá-lo em JavaScript.
loading : Defina como um iFrame é carregado. Escolha entre 'preguiçoso', 'ansioso' ou 'automático'. Por exemplo, quando o valor 'lazy' é usado, o iFrame é carregado quando o usuário rola a página para baixo até o iFrame. Isso tem o efeito de melhorar a velocidade de carregamento da página. 'Eager' carrega-o imediatamente enquanto 'auto' permite que o navegador decida quando carregar o iFrame.

 <!DOCTYPE html> <html> <body> <div class="wrapper"> <iframe src="https://www.youtube.com/embed/PMz9ovrVb_Q" loading="lazy"></iframe> </div> </body> </html>

sandbox : Este atributo define algumas restrições para o conteúdo no iFrame, como execução de script, envio de formulário e muito mais. Você também pode fazer exceções para qualquer um deles. Aqui estão algumas das restrições:
– formulários de permissão
– permitir-bloqueio de ponteiro
– permitir pop-ups
– permitir-mesma-origem
– scripts de permissão
- permitir-top-navegação
– permitir-modais

Você pode aplicar todas as restrições apenas adicionando o atributo sandbox ou pode especificar qual dos itens acima será excluído definindo-o no código assim:

 <!DOCTYPE html> <html> <body> <iframe src="https://www.youtube.com/embed/PMz9ovrVb_Q" sandbox="allow-forms allow-modals"></iframe> </body> </html>

allowfullscreen : faz o que diz na lata e permite que o iFrame abra totalmente na tela.

Para testar o allowfullscreen , você pode experimentá-lo incorporando um vídeo do YouTube como este:

 <!DOCTYPE html> <html> <body> <iframe width="560" height="315" src="https://www.youtube.com/embed/jofNR_WkoCE" allowfullscreen></iframe> </body> </html>

Você notará que o botão de tela cheia no canto inferior direito funciona apenas quando o atributo allowfullscreen é usado. Se você remover o atributo, o botão de tela cheia ficará cinza.

Como tornar um iFrame responsivo

É super importante que todos os elementos do seu site sejam responsivos. Os iFrames não são exceção. Para garantir que um iFrame HTML seja responsivo, você deve primeiro remover os atributos de largura e altura do código e, em seguida, usar alguns elementos HTML e código CSS, conforme mostrado abaixo:

 <!DOCTYPE html> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .container { position: relative; width: 100%; overflow: hidden; padding-top: 56.25%; /* 16:9 Aspect Ratio */ } .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; } </style> </head> <body> <div class="container"> <iframe class="responsive-iframe" src="https://www.youtube.com/embed/PMz9ovrVb_Q"></iframe> </div> </body> </html>

Envolvemos nosso iFrame em um elemento div e aplicamos um pouco de CSS para definir as dimensões, o que garante uma boa aparência em todas as telas, incluindo celulares.

Se você testar a largura da tela agora dentro do seu navegador, verá que o iFrame é exibido de forma responsiva e sua proporção é mantida.

NOTA: Se você não conhece as ferramentas do seu navegador, pode achar útil uma extensão como o “Responsive Web Design Tester” para Chrome.

Os benefícios de usar iFrames

Os iFrames são super populares e por boas razões. Vejamos alguns dos motivos:

Compartilhamento de mídia externa

Há muitas ocasiões em que você pode querer compartilhar mídia externa, mas manter seus visitantes em seu site em vez de enviá-los para um site de terceiros. Os iFrames permitem que você faça isso perfeitamente, incorporando a mídia externa de maneira amigável ao usuário em seu próprio site.

Configurações personalizadas

Ao incorporar mídia (como vídeos do YouTube), a maioria das plataformas de hospedagem de vídeo fornecerá muito controle sobre como esse conteúdo é exibido. Por exemplo, você pode escolher se deseja que o vídeo em seu iframe seja reproduzido automaticamente no carregamento ou até mesmo em loop indefinidamente.

Mantendo as coisas isoladas

Outra grande coisa sobre os iFrames é que eles não interferem no documento pai (normalmente na página do seu site em que estão incorporados). Isso significa que os iFrames não são afetados pelo CSS e/ou Javascript do seu site.

Alguns dos usos mais populares para iFrames são:

Incorpore um vídeo do Youtube ou uma linha do tempo do Twitter ou uma playlist de podcast do Spotify
Puxe informações sobre o clima para o seu site incluindo uma previsão do tempo
Adicionando um local do Google Maps

Desde que a fonte que você deseja exibir forneça um código de incorporação, normalmente você sempre poderá exibi-lo em seu site em um iFrame.

Desvantagens potenciais do uso de iFrames

Uma das principais razões para NÃO usar os iFrames é que eles podem aumentar o risco de seu site ser submetido a um ataque entre sites.

Se a fonte incorporada em seu iFrame não for confiável, você corre o risco de experimentar o que é conhecido como 'Injeção de iFrame malicioso', que envolve um invasor injetando um iFrame em uma página da web. Em um ataque de injeção de iFrame, 'os sites maliciosos normalmente exploram códigos que podem comprometer a máquina do usuário final'.

Portanto, ao incorporar conteúdo em seu site usando iFrames, é de vital importância que esse conteúdo venha de uma fonte confiável. Na dúvida, não use.

Outra desvantagem de usar iFrames é que eles podem deixar seu site lento, especialmente se você carregar vários deles. Seu site se torna tão rápido quanto o conteúdo externo que precisa ser carregado. Como precaução contra isso, você pode usar o atributo de carregamento discutido anteriormente.

Conclusão

Os iFrames são amplamente usados em sites e não há sinal de que isso pare tão cedo. Desde que você os use corretamente, eles podem ser uma ótima ferramenta para aprimorar o conteúdo do seu site.