English العربية Português 日本語

HTML: iframes HTML

<iframe> (inline frame) permite incorporar outra página HTML dentro da página atual. Seja incorporando vídeos, mapas ou outras páginas web, iframes são uma ferramenta indispensável no desenvolvimento web.

1. Conceitos Básicos de iframe

Use <iframe src="URL"></iframe> para incorporar outra página web na página atual. Os atributos width e height controlam as dimensões de exibição:

▶ Exemplo

HTML 
<!-- Incorpora uma página simples, com 600px de largura e 400px de altura -->
<iframe src="https://example.com" width="600" height="400">
Seu navegador não suporta iframes.
</iframe>
▶ Experimente

2. Atributos de iframe Explicados

Os iframes fornecem vários atributos para controlar o comportamento de incorporação:

O atributo name combinado com target permite que os links abram dentro de um iframe:

▶ Exemplo

HTML 
<!-- iframe com nome -->
<iframe src="about:blank" name="content-frame"
width="100%" height="300"></iframe>

<!-- Os links abrem dentro do iframe via target -->
<a href="https://www.wikipedia.org" target="content-frame">
Abrir a Wikipédia no iframe
</a>
<a href="https://www.example.com" target="content-frame">
Abrir Example no iframe
</a>
▶ Experimente
💡 Acessibilidade em Primeiro Lugar: O atributo title não é opcional para iframes — os leitores de tela o anunciam para ajudar usuários com deficiência visual a entender o conteúdo incorporado. Mesmo que não seja visível na página, sempre adicione um title significativo a cada iframe.

3. Segurança de iframe — O Atributo sandbox

O atributo sandbox impõe restrições adicionais ao conteúdo dentro de um iframe e é uma medida de segurança importante. Ele pode restringir o envio de formulários, pop-ups, execução de scripts e outros comportamentos:

HTML 
<!-- Sandbox mais rigoroso: desativa todos os recursos avançados -->
<iframe src="https://example.com" sandbox=""></iframe>

<!-- Permite scripts, mas bloqueia envio de formulários e pop-ups -->
<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

<!-- Permite scripts e formulários, mas ainda bloqueia pop-ups, navegação, etc. -->
<iframe src="https://example.com"
sandbox="allow-scripts allow-forms"></iframe>

4. Incorporação de Conteúdo de Terceiros

O uso mais comum de iframes na prática é incorporar conteúdo de serviços de terceiros, como vídeos do YouTube e mapas do Google:

▶ Exemplo

HTML 
<!-- Incorporar um vídeo do YouTube -->
<iframe width="560" height="315"
src="https://www.youtube.com/embed/VIDEO_ID"
title="Player de Vídeo do YouTube"
allow="accelerometer; autoplay; clipboard-write;
encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>

<!-- Incorporar um Google Mapa -->
<iframe width="600" height="450"
src="https://www.google.com/maps/embed?pb=..."
title="Mapa do Google"
allowfullscreen
loading="lazy"></iframe>
▶ Experimente

Ao incorporar conteúdo de terceiros, as plataformas geralmente fornecem código iframe pronto em suas opções de compartilhamento/incorporação — basta copiar e colar. Certifique-se de incluir o atributo title e loading="lazy" para otimizar o desempenho de carregamento.

5. Comunicação entre iframe e Página Pai

Quando o iframe e a página pai compartilham a mesma origem (mesmo protocolo, domínio e porta), você pode acessar diretamente o DOM um do outro via JavaScript. Para cenários entre origens, o HTML5 fornece a API postMessage para comunicação segura:

HTML 
<!-- Página pai envia uma mensagem -->
<iframe src="https://outro-dominio.com/pagina"
id="myFrame" title="Página entre origens"></iframe>
<script>
var frame = document.getElementById('myFrame');
frame.contentWindow.postMessage('Olá, iframe!', 'https://outro-dominio.com');
</script>

<!-- Dentro do iframe, recebendo a mensagem (deve estar na página incorporada) -->
<script>
window.addEventListener('message', function(event) {
// Sempre verifique a origem!
if (event.origin !== 'https://dominio-pai.com') return;
console.log('Recebido:', event.data);
});
</script>
🔒 Dica de Segurança: Ao usar postMessage, nunca confie em nada além de event.origin. Sempre verifique a fonte da mensagem para evitar enviar dados confidenciais para domínios não confiáveis.

❓ Perguntas Frequentes

P Quais são os riscos de segurança do iframe?
R Riscos principais：1）Clickjacking — atacantes incorporam sua página em um site malicioso, induzindo usuários a clicar; 2）Scripting entre sites — conteúdo incorporado pode executar JavaScript malicioso; 3）Vazamento de dados — iframes maliciosos podem roubar informações do usuário. Proteções：use sandbox para restringir funcionalidades, allow para controle preciso de permissões, cabeçalho X-Frame-Options para evitar incorporação.
P Por que o iframe afeta o SEO?
R Mecanismos de busca têm capacidade limitada de indexar conteúdo de iframe：1）Texto, links e imagens dentro de iframes podem não contar para o SEO da página pai; 2）Iframes aumentam o tempo de carregamento da página, afetando pontuações do Core Web Vitals; 3）A experiência mobile pode ser prejudicada. Recomendação：mantenha conteúdo importante na página principal, não em iframes; use iframes apenas para incorporar vídeos, mapas e outros conteúdos de terceiros.
P O que o atributo sandbox faz?
R sandbox cria uma "sandbox" para o iframe, desabilitando todas as operações perigosas por padrão (scripts, formulários, popups, etc.). Você pode habilitar permissões gradualmente：sandbox="allow-scripts" permite JavaScript, sandbox="allow-forms" permite envio de formulário, sandbox="allow-same-origin" permite acesso a cookies. Múltiplas permissões são separadas por espaço. Recomendação：sempre use sandbox, só habilite permissões que realmente precisa.
P Qual é a diferença entre iframe e <embed>/<object>?
R <iframe> é especificamente para incorporar páginas HTML, com suporte completo a recursos (sandbox, postMessage, etc.). <embed> e <object> incorporam conteúdo não-HTML (como PDF, Flash, SVG). No HTML5, <embed> é uma tag vazia; <object> pode conter conteúdo de fallback (<param> e fallback). Recomendação：use <iframe> para páginas web, <embed> ou <object> para PDFs.

📖 Resumo

📝 Exercícios

  1. Incorpore Seu Primeiro Vídeo: Encontre um vídeo no YouTube, copie o código de incorporação e cole no seu arquivo HTML. Certifique-se de adicionar o atributo title e loading="lazy".
  2. Experimento com Sandbox: Crie um iframe, comece com sandbox="" (o modo mais rigoroso) e, em seguida, ative gradualmente allow-scripts e allow-forms, observando como o comportamento muda.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%