iFrame é a redução para Inline Frame. Ele é um elemento amplamente usado no campo do web design, permitindo que o usuário insira qualquer tipo de mídia na estrutura de códigos de um site. Hoje você vai aprender mais sobre o que é iframe , como funciona e como fazer para colocar um código HTML de conteúdos na sua página.
O Que é iFrame
iFrame pode ser adaptado do inglês como quadro, estrutura, composição, trecho ou formação. No contexto da computação, o iFrame é um trecho de código HTML que pode ser inserido em qualquer parte de um site.
Com ele, o usuário consegue incorporar conteúdos de diferentes formatos e estilos. É possível inserir documentos para baixar, fotos, vídeos, imagens e sons. Além de outros tipos de mídias interativas, como games e questionários com opções de escolha.
Essa integração de conteúdo acontece através do simples posicionamento de um código já formatado e disponível em outras fontes. É possível posicionar o conteúdo onde o usuário achar melhor, sem ter que realmente colocá-lo na estrutura geral de layout da página.
Para entender melhor, considere que o iFrame é parte do seu conteúdo, mas não exatamente do seu site. Por exemplo, você pode incorporar um vídeo do YouTube diretamente na sua página. Mas ele não pertence ao seu site (ele está armazenado na plataforma de vídeos).
Contudo, não é muito indicado usar códigos iFrame para todas as funções de um site. Ele pode fazer uma página ficar mais lenta e até mesmo colocar tudo em risco, caso a fonte do código não seja muito confiável.
Como Usar iFrame em um Site?
É hora de aprender a como inserir um código iframe em uma parte estrutural do seu site. É dessa forma que é possível compartilhar conteúdos de outras páginas nas suas próprias páginas.
É possível inserir um elemento iFrame em uma página usando a simples tag <iframe> no documento HTML desta mesma página. Por exemplo, digamos que queremos inserir um vídeo qualquer em uma página.
Tudo o que é preciso fazer é copiar e colar o código abaixo no documento HTML do documento da página em que você quer exibi-lo. <iframe src="https://www.youtube.com/embed/k7fTl96EFsw" width="680" height="480" allowfullscreen></iframe>
O código acima vai abrir um vídeo da Go Hosting sobre como instalar o CMS WordPress pela sua hospedagem de sites. Algo que vai gerar um resultado na página próximo da imagem de exibição abaixo.
Vamos desdobrar cada trecho do código e entender o que cada um significa abaixo.
- <iframe></iframe> – é o intervalo em que o código de origem de qualquer tipo de conteúdo deve ser inserido ser agregado em uma página.
- SRC (source) – é a origem do conteúdo, sendo necessário colocar a URL da fonte do conteúdo.
- Width – é a largura do arquivo do conteúdo adicionado a uma página. No caso do exemplo, é 680 pixels de exibição para o vídeo.
- Height – é a altura do arquivo do conteúdo adicionado a uma página. No caso do exemplo, é de 480 pixels para a exibição do vídeo.
- Allowfullscreen – permite que o conteúdo (o vídeo, neste caso), seja exibido e visualizado em tela cheia no navegador e na tela do usuário.
Questões de Segurança e Ameaças na Web
Pela sua própria natureza de codificação, um iFrame não é para colocar um site e nem os visitantes dele sob riscos de segurança. E também à mercê de ameaças virtuais e golpes pela internet.
Em suma, o iFrame foi desenvolvido para ajudar os criadores de conteúdo a criar páginas e materiais visualmente atrativos para seus leitores. E, por conta disso, é preciso ter um certo cuidado na hora de posicionar iframes de fontes suspeitas.
Historicamente, saiba que, por volta de 2008, um surto de injeção de iframes nocivos comprometeu muitos sites da internet. Grandes portais, como o da ABC News, foram invadidos por conta de códigos maliciosos.
O que acontece é que, este tipo de ataque redireciona o acesso do visitante para uma página aleatória infectada, instalando um vírus no computador do usuário. O resultado é o roubo de informações e o comprometimento da máquina.
Por isso, não é recomendado inserir qualquer código iframe html no seu site. Quando estiver navegando pela internet, nunca pegue um código suspeito e insira no conteúdo do seu site. Por mais vantajoso e promissor que ele possa parecer.
Considerações Finais
Se você quer colocar qualquer conteúdo de outras páginas no seu próprio site, o que você vai precisar fazer é copiar e inserir a tag iFrame dele no documento HTML das suas páginas. Só se certifique que a origem deste código seja de procedência confiável para não comprometer a segurança do seu projeto online.
Sucesso aí!
