Iframes em HTML

Iframe é uma janela dentro da sua página

Um iframe cria um contexto de navegação independente. Ele pode carregar um vídeo externo, um mapa, um documento, um formulário, um calendário ou um dashboard dentro do seu layout. Mas essa força vem com custo: segurança, performance, privacidade e acessibilidade.

• Conteúdo próprio: você controla código, SEO, performance e segurança.
• Conteúdo incorporado: você pega uma funcionalidade emprestada de outra origem.

iframe, src, title, width, height e fallback

O src define a URL carregada. O title identifica o iframe para leitores de tela. width e height reservam dimensões iniciais, mas a responsividade deve ser refinada com CSS.

<iframe src="documento-interno.html"
        title="Documento interno de exemplo"
        width="800"
        height="450">
  Seu navegador não conseguiu carregar este conteúdo.
  <a href="documento-interno.html">Abrir documento em nova aba</a>.
</iframe>

Width/height vs responsivo

width e height definem medidas iniciais. Um iframe responsivo precisa se adaptar ao tamanho da tela, geralmente com um contêiner que mantém proporção e evita cortes no mobile.

Vídeo externo, mapa, documento, formulário e dashboard

O iframe é útil quando você precisa trazer uma experiência externa para dentro da página sem recriar a tecnologia do zero.

<!-- Link normal como alternativa -->
<a href="documento.html" target="_blank" rel="noopener noreferrer">
  Abrir documento completo em nova aba
</a>

sandbox, allow, allowfullscreen, loading e referrerpolicy

Segurança em iframe é limite de privilégio. O conteúdo incorporado deve receber apenas as permissões necessárias para cumprir sua função.

<iframe src="app-externo.html"
        title="Aplicação externa isolada"
        sandbox>
</iframe>

<iframe src="formulario-externo.html"
        title="Formulário externo seguro"
        sandbox="allow-forms"
        loading="lazy"
        referrerpolicy="no-referrer">
</iframe>

<iframe src="video.html"
        title="Player de vídeo incorporado"
        allow="autoplay; encrypted-media; picture-in-picture"
        allowfullscreen
        loading="lazy">
</iframe>

• sandbox restringe scripts, formulários, pop-ups e navegação por padrão.
• allow controla permissões como autoplay, câmera, microfone e geolocalização.
• allowfullscreen só deve ser usado quando tela cheia faz sentido.
• loading="lazy" adia o carregamento e melhora performance inicial.
• referrerpolicy controla dados de referência enviados à fonte externa.

Iframe precisa de title, contexto e rota alternativa

Para tecnologias assistivas, entrar em um iframe é mudar de contexto. O title, headings, textos explicativos, figure, figcaption e links alternativos impedem que o usuário fique perdido.

• Todo iframe precisa de title descritivo.
• Use heading antes do iframe para contextualizar.
• Use figure e figcaption quando o embed for autocontido.
• Use wrapper responsivo para evitar cortes no mobile.
• Forneça link alternativo para abrir o conteúdo fora do iframe.
• Teste navegação por teclado dentro e fora do quadro.

15 perguntas para provar domínio

1. O que é um iframe? Uma janela para incorporar outro documento dentro da página atual.
2. Qual atributo define a URL do iframe? src.
3. Por que title é importante? Identifica o conteúdo para leitores de tela.
4. Iframe carrega de forma independente? Sim.
5. Iframes ajudam no SEO? Geralmente não para conteúdo essencial.
6. Para que serve sandbox? Restringir permissões por segurança.
7. O que faz loading="lazy"? Adia o carregamento até o iframe estar próximo da tela.
8. Como permitir tela cheia? Com allowfullscreen.
9. O que é fallback do iframe? Texto entre as tags iframe.
10. width e height podem ser usados? Sim, para dimensões iniciais.
11. Qual impacto de muitos iframes? Mais requisições e queda de performance.
12. O que é allow? Política de permissões do iframe.
13. Diferença entre iframe e link? Iframe incorpora; link navega.
14. Posso incorporar qualquer site? Não, muitos bloqueiam por segurança.
15. Iframes são bons para menus? Não, prefira navegação nativa.

Registre sua página de conteúdo incorporado

git status
git add .
git commit -m "aula-34: cria pagina de conteudo incorporado com iframes"
git push

• git status: verifica as alterações no arquivo de iframes.
• git add .: prepara a página para o commit.
• git commit: documenta sua prática de arquitetura web com embeds.
• git push: envia a evidência para o portfólio remoto.