Tag iframes HTML: Neste artigo, vamos explorar a tag iframe, um elemento HTML poderoso usado para incorporar outro documento HTML dentro de um documento HTML atual. Vamos mergulhar nos detalhes de como a tag iframe funciona e como usar seus atributos srcdoc, sandbox, allow e referrer.
A Tag Iframe
A tag iframe é usada para incorporar outro documento HTML dentro do documento HTML atual. Isso é útil quando você deseja exibir conteúdo de outra página sem redirecionar o usuário para essa página.
Aqui está um exemplo de como a tag iframe pode ser usada:
<iframe src="https://www.example.com" title="Exemplo de Iframe"></iframe>
Neste exemplo deixamos aqui nossa homenagem ao mestre Akira Toriyama e a tag iframe é usada para incorporar um vídeo do anime Dragon Ball Super direto do YouTube para esse artigo!
O Atributo Srcdoc
O atributo srcdoc permite especificar o conteúdo HTML do iframe diretamente, em vez de carregá-lo de uma URL externa. Isso é útil quando você deseja criar um iframe que contém um pequeno fragmento de conteúdo HTML.
<iframe srcdoc="<p>Este é um pequeno fragmento de HTML.</p>"></iframe>
Neste exemplo, a tag iframe incorpora o mesmo vídeo do exemplo anterior, mas restringe o que a página incorporada pode fazer ao utilizar o atributo sandbox.
O Atributo Allow
O atributo allow permite que você especifique quais recursos do navegador o documento incorporado pode acessar. Isso é útil quando você deseja permitir que o documento incorporado use recursos específicos, como geolocalização, microfone, câmera, etc.
<iframe width="460" height="780" src="https://www.thiagorossi.com.br" allow="geolocation; microphone"></iframe>
Neste exemplo, a tag iframe incorpora a página inicial do site “www.thiagorossi.com.br” e permite que a página incorporada acesse a geolocalização e o microfone do usuário.
O Atributo Referrer
O atributo referrer permite controlar como o cabeçalho de referência é enviado quando o navegador faz solicitações a partir do documento incorporado. Isso é útil para controlar a privacidade, pois permite que você restrinja as informações de referência que são enviadas ao servidor.
<iframe src="https://www.thiagorossi.com.br" referrerpolicy="no-referrer"></iframe>
Neste exemplo, a tag iframe incorpora a página inicial do site “www.thiagorossi.com.br” e usa a política de referência “no-referrer”, o que significa que nenhuma informação de referência será enviada ao servidor.
Conclusão
Em resumo, a tag iframe é uma ferramenta poderosa que permite incorporar outro documento HTML dentro do documento HTML atual. Compreender como a tag iframe funciona e como usar seus atributos srcdoc, sandbox, allow e referrer é uma habilidade essencial para qualquer desenvolvedor web.
E por falar em desenvolvimento web, uma das coisas mais importantes é dar vida às suas criações e deixá-las acessíveis para todos através da internet. Faça como nós e disponibilize seus sites e sistemas hospedando-os na Hostinger! Clique aqui e saiba mais!!!
