O que é iFrame?

Um iFrame, ou Inline Frame, é um elemento HTML que permite incorporar outro documento HTML na página da web atual.

O que é um iFrame?

Um iFrame, abreviação de Inline Frame, é um HTML elemento que permite a incorporação de um documento HTML externo dentro dos limites de outro documento HTML. Essencialmente, ele atua como uma janela que pode exibir conteúdo de uma página da web ou recurso diferente, tudo isso enquanto permanece parte da página da web atual. iFrames são amplamente usados para vários propósitos, como integrar vídeos, mapas interativos, anúncios ou outro conteúdo dinâmico em um site sem exigir que os usuários saiam da página que estão visualizando.

Como funciona um iFrame?

Um iFrame incorpora um documento HTML externo ou outro conteúdo da web dentro da página da web atual. Aqui está uma explicação passo a passo de como esse processo funciona:

Inserindo o elemento iFrame. O processo começa com o desenvolvedor adicionando um tag para o HTML da página da web. Esta tag inclui atributos como src, que especifica o URL do conteúdo externo a ser incorporado e outros atributos opcionais como largura, altura, frameborder e allowfullscreen para controlar a aparência e o comportamento do iFrame.
Solicitando a intenção externa. Uma vez que o usuário navegador carrega a página da web que contém o iFrame, o navegador lê o atributo src no etiqueta e faz uma separada HTTP solicitação para a URL especificada para recuperar o conteúdo.
Carregando o conteúdo externo. O navegador busca o conteúdo externo, que pode ser um documento HTML inteiro, um arquivo de mídia ou qualquer recurso da web. O conteúdo é tratado como um documento independente dentro da página principal. O iFrame essencialmente cria uma mini janela do navegador dentro da página pai, carregando e renderizando o conteúdo como se fosse uma página independente.
Renderizando o conteúdo. O navegador então exibe o conteúdo dentro dos limites do iFrame. O conteúdo incorporado aparece como se fosse parte da página principal, mas opera de forma independente. A página pai e o conteúdo do iFrame não interagem diretamente, embora compartilhem o mesmo espaço visual.
Interação e funcionalidade. Os usuários interagem com o conteúdo dentro do iFrame da mesma forma que fariam com qualquer página da web. Por exemplo, se o iFrame contiver um formulário, os usuários podem preenchê-lo e enviá-lo. O conteúdo incorporado pode incluir seu próprio JavaScript, APF, e outros recursos, executados dentro do contexto do iFrame, separados da página pai.
Ciclo de vida de documentos independente. O conteúdo incorporado dentro do iFrame tem seu próprio ciclo de vida de documento. Isso significa que ele carrega, executa Scripts, e interage com seus próprios recursos independentemente da página pai. Por exemplo, se a página pai for recarregada, o conteúdo do iFrame também será recarregado, mas seu estado e comportamento são gerenciados separadamente do documento principal.
Segurança e restrições. Devido a potenciais riscos de segurança, os navegadores implementam várias restrições no conteúdo do iFrame. Por exemplo, as políticas de origem cruzada impedem que scripts na página pai acessem o conteúdo dentro de um iFrame de um site diferente. domínio. Além disso, os desenvolvedores usam cabeçalhos de segurança e atributos como sandbox para limitar ainda mais o que o conteúdo do iFrame pode fazer, como desabilitar scripts ou impedir envios de formulários.

Atributos de um iFrame

O element em HTML tem vários atributos que controlam seu comportamento, aparência e interação com o conteúdo que ele exibe. Aqui está uma explicação detalhada dos principais atributos:

fonte Este atributo especifica a URL do conteúdo externo a ser incorporado no iFrame. É o atributo mais essencial porque determina qual conteúdo será carregado no iFrame. Por exemplo, incorporará o conteúdo de "https://www.example.com" no iFrame.
largura e altura. Esses atributos controlam o tamanho do iFrame em pixels ou porcentagens. Por exemplo, criará um iFrame com 600 pixels de largura e 400 pixels de altura.
borda do quadro. Este atributo especifica se o iFrame deve ter uma borda. O valor 0 significa nenhuma borda, enquanto 1 significa uma borda visível. Este atributo agora é considerado obsoleto, com o CSS moderno sendo a maneira preferida de estilizar a borda do iFrame.
rolagem. Este atributo controla a visibilidade das barras de rolagem dentro do iFrame. Ele pode assumir três valores: yes, no ou auto. yes força as barras de rolagem a aparecerem, no as impede e auto permite que as barras de rolagem apareçam somente quando necessário. Por exemplo, impedirá que as barras de rolagem apareçam mesmo que o conteúdo seja maior que o iFrame.
caixa de areia. Este atributo poderoso permite um conjunto de restrições extras no conteúdo dentro do iFrame para aumentar a segurança. Ele pode ser usado para desabilitar scripts, impedir o envio de formulários, bloquear o uso de plugins e restringir outros comportamentos potencialmente arriscados. O valor deste atributo pode ser uma lista de restrições separadas por espaços, como allow-scripts, allow-forms, allow-same-origin, etc. Por exemplo, permitiria que scripts fossem executados dentro do iFrame, mas com outras restrições.
permitir. O atributo allow especifica uma política de recursos para o conteúdo no iFrame. Isso controla permissões para coisas como acesso à câmera, geolocalização, modo de tela cheia e muito mais. É uma maneira de conceder ou negar explicitamente certos recursos do navegador para o conteúdo dentro do iFrame. Por exemplo, permite que o conteúdo acesse a geolocalização apenas para a mesma origem e desabilita completamente o acesso à câmera.
nome. Este atributo atribui um nome ao iFrame, o que pode ser útil para direcioná-lo com links ou scripts. Por exemplo, um link com target="iframe_name" abrirá o conteúdo vinculado dentro do iFrame nomeado. Isso é particularmente útil em situações em que vários iFrames existem em uma página.
srcdoc. Este atributo permite que você incorpore conteúdo HTML diretamente dentro do iFrame em vez de carregá-lo de uma fonte externa. É útil para incorporar pequenos pedaços de conteúdo HTML sem a necessidade de um arquivo separado. Por exemplo, Hello, world!"> exibiria "Olá, mundo!" dentro do iFrame.
política de referência. Este atributo controla a quantidade de informações de referenciador que devem ser enviadas ao buscar a URL src. Ele ajuda a gerenciar preocupações de privacidade e segurança relacionadas aos dados de referenciador. Os valores podem ser no-referrer, origin, strict-origin, etc., que determinam quanto da URL da página original é compartilhada com o conteúdo incorporado.
Carregando. O atributo loading especifica se o iFrame deve ser carregado imediatamente ou atrasado. Os valores podem ser eager, que carrega o iFrame o mais rápido possível, ou lazy, que adia o carregamento até que o iFrame esteja próximo da viewport, melhorando o desempenho e a experiência do usuário ao reduzir o tempo de carregamento inicial.
política de referência. Este atributo define a política de referência para solicitações feitas pelo iframe, o que afeta a quantidade de informações sobre a página de referência enviada ao conteúdo do iframe. As opções incluem no-referrer, origin, same-origin e strict-origin.
CSP. O atributo csp (content security policy) permite que o desenvolvedor especifique uma política de segurança de conteúdo especificamente para o conteúdo no iFrame. Isso impõe certas medidas de segurança, como quais fontes de conteúdo podem ser carregadas, o que pode evitar certos tipos de ataques como cross-site scripting (XSS).

Para que são usados os iFrames?

iFrames são usados para uma variedade de propósitos no desenvolvimento web, principalmente para incorporar conteúdo externo dentro de uma página web, mantendo um contexto separado para esse conteúdo. Aqui estão alguns casos de uso comuns:

Incorporando vídeos. iFrames são amplamente usados para incorporar vídeos de plataformas como YouTube, Vimeo ou outros serviços de hospedagem de vídeo. Isso permite que os usuários assistam a vídeos diretamente em um site sem navegar para fora da página. O player de vídeo incorporado, completo com controles, é carregado dentro do iFrame.
Integrando mapas. iFrames são frequentemente usados para incorporar mapas interativos de serviços como Google Maps ou OpenStreetMap. Isso fornece aos usuários a capacidade de visualizar e interagir com mapas diretamente na página da web, o que é especialmente útil para exibir localizações, direções e outros dados geográficos.
Exibindo páginas da web ou documentos externos. iFrames permitem a inclusão de páginas da web inteiras ou documentos de outros sites. Isso é comumente usado para exibir conteúdo como termos de serviço, políticas de privacidade ou outros documentos externos sem exigir que os usuários saiam do site atual.
Carregando widgets e plugins de terceiros. Muitos serviços de terceiros, como plataformas de mídia social, ferramentas de chat de suporte ao cliente e redes de publicidade, fornecem widgets que podem ser incorporados usando iFrames. Isso permite que os sites integrem funcionalidades como comentários do Facebook, feeds X ou suporte de chat ao vivo sem desenvolvimento de backend.
Hospedagem de anúncios. iFrames são comumente usados para incorporar anúncios em páginas da web. Redes de anúncios geralmente fornecem tags de anúncios baseadas em iFrame, que ajudam a isolar o conteúdo do anúncio do restante da página para evitar conflitos entre o código do anúncio e o código da página.
Isolar conteúdo por motivos de segurança. iFrames podem ser usados para incorporar conteúdo de fontes externas, mantendo-o isolado dos scripts e estilos da página pai. Isso é particularmente útil para manter limites de segurança, pois evita que conteúdo potencialmente inseguro afete a página principal.
Testando e visualizando conteúdo. Os desenvolvedores geralmente usam iFrames para testar ou visualizar o conteúdo de um ambiente de desenvolvimento em um site ativo. Isso permite fácil comparação e teste sem integrar totalmente o conteúdo ao site.
Exibindo conteúdo responsivo. iFrames podem ser usados para exibir conteúdo responsivo que se ajusta a diferentes tamanhos de tela, como páginas da web responsivas ou aplicativos. Isso é útil para garantir que o conteúdo incorporado seja acessível e visualmente consistente em todos os dispositivos.
Incorporação de formulários e ferramentas interativas. iFrames são usados para incorporar formulários, pesquisas, calculadoras e outras ferramentas interativas de fontes externas. Isso permite que sites ofereçam funcionalidades complexas sem ter que desenvolver essas ferramentas do zero.
Incorporação entre domínios. Quando o conteúdo precisa ser incorporado de um domínio diferente, os iFrames fornecem um método para fazer isso, mantendo a separação dos contextos de origem. Isso é particularmente útil para conteúdo hospedado em um domínio diferente. server ou domínio, permitindo gerenciamento e implantação mais fáceis.

Exemplos de iFrame

Aqui estão dois exemplos de iFrames em uso.

Exemplo 1: Incorporando um vídeo do YouTube

Este exemplo demonstra como incorporar um vídeo do YouTube em uma página da web usando um iFrame.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iFrame YouTube Example</title>

</head>

<body>

    <h1>Watch this Video:</h1>

    <iframe width="560" height="315" src="https://www.youtube.com/embed/dQw4w9WgXcQ"

    title="YouTube video player" frameborder="0" allow="accelerometer; autoplay;

    clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>

    </iframe>

</body>

</html>

Explicação:

O atributo src é definido como a URL do vídeo do YouTube. Neste caso, é um vídeo de exemplo.
Os atributos de largura e altura definem o tamanho do player de vídeo.
O atributo allow especifica permissões para recursos como reprodução automática, criptografada mídia e tela cheia.
O atributo allowfullscreen permite que o vídeo seja visualizado em modo de tela cheia.

Exemplo 2: Incorporando um mapa do Google

Este exemplo mostra como incorporar um mapa do Google em uma página da web usando um iFrame.

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>iFrame Google Map Example</title>

</head>

<body>

    <h1>Our Location:</h1>

    <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3151.8354345096274!

    2d144.95373631531565!3d-37.81720997975142!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!

    1s0x6ad65d43f1a5d53b%3A0x1aaf3d5a5b64db5e!2sFederation%20Square!5e0!3m2!1sen!2sau!4v1617174192722!5m2!

    1sen!2sau"

    width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy"></iframe>

</body>

</html>

Explicação:

O atributo src contém a URL fornecida pelo Google Maps para incorporar o mapa. A URL inclui parâmetros específicos que determinam a localização e as configurações de visualização.
Os atributos width e height definem o tamanho do mapa na página da web.
A parte style="border:0;" remove quaisquer bordas ao redor do mapa.
O atributo allowfullscreen permite que os usuários visualizem o mapa em modo de tela cheia.
O atributo loading="lazy" adia o carregamento do mapa até que ele esteja próximo da janela de visualização, melhorando o desempenho do carregamento da página.

Como usar iFrames?

Os trechos a seguir explicam como usar iFrames para aproveitar ao máximo a experiência do usuário.

Incorporar conteúdo externo

Para incorporar conteúdo externo em uma página da web, os desenvolvedores normalmente usam o Elemento HTML, que permite que eles incorporem recursos como vídeos, mapas ou páginas da web inteiras de outros domínios diretamente em seu site. O processo envolve especificar a fonte do conteúdo por meio do atributo src no tag, que aponta para a URL do conteúdo externo. Atributos adicionais como width, height e allow podem ser usados para controlar a aparência e o comportamento do conteúdo incorporado, garantindo que ele se encaixe perfeitamente no design da página.

Ao incorporar conteúdo externo dessa maneira, os desenvolvedores melhoram a funcionalidade e a interatividade de suas páginas da web, oferecendo aos usuários uma experiência mais rica sem exigir que eles saiam do site.

Carregar conteúdo dinamicamente

Carregar conteúdo dinamicamente dentro de um iFrame envolve alterar a fonte (src) do iFrame em resposta a interações do usuário ou outros gatilhos, como botões ou links. Isso pode ser obtido usando JavaScript, onde você pode manipular o atributo src do iFrame para carregar novo conteúdo sem recarregar a página inteira.

Por exemplo, quando um usuário clica em um botão, uma função JavaScript pode ser executada para atualizar o atributo src do iFrame, fazendo com que ele busque e exiba um novo documento HTML ou recurso da web. Essa abordagem é particularmente útil para criar web dinâmicos aplicações onde diferentes conteúdos precisam ser exibidos na mesma área da página com base nas ações do usuário, melhorando a experiência do usuário ao fornecer transições perfeitas entre diferentes partes do conteúdo.

Além disso, ao aproveitar o history.pushState API em combinação com o conteúdo dinâmico do iFrame, é possível manter o histórico do navegador, permitindo que os usuários naveguem para frente e para trás pelo conteúdo carregado dinamicamente como se fossem carregamentos de página tradicionais.

Criando quadros em linha

A criação de quadros embutidos, comumente conhecidos como iFrames, envolve o uso de Elemento HTML para incorporar conteúdo externo diretamente em uma página da web. Este elemento é versátil, permitindo que os desenvolvedores insiram qualquer coisa, de vídeos e mapas a páginas da web inteiras ou widgets interativos no conteúdo existente. Ao especificar o atributo src, você define a URL do conteúdo a ser incorporado, enquanto outros atributos como width, height e frameborder controlam a aparência e o comportamento do iFrame.

Os iFrames são particularmente úteis para integrar perfeitamente conteúdo de terceiros, permitindo que os usuários interajam com recursos externos sem sair do site principal. Com atributos adicionais, como sandbox e allow, os desenvolvedores podem ajustar a segurança e a funcionalidade, garantindo que o conteúdo incorporado se comporte conforme o esperado, mantendo a integridade e o desempenho geral do site.

Melhores práticas de iFrames

Ao usar iFrames no desenvolvimento web, seguir as melhores práticas é essencial para garantir que eles funcionem corretamente, mantenham a segurança e forneçam uma boa experiência do usuário. Aqui estão algumas melhores práticas para usar iFrames:

Use o atributo sandbox para segurança. O atributo sandbox aprimora a segurança aplicando restrições ao conteúdo dentro do iFrame. Por padrão, os iFrames podem introduzir riscos de segurança, como cross-site scripting (XSS). Usar sandbox limita as ações que o conteúdo incorporado pode executar, como executar scripts, enviar formulários ou acessar o armazenamento do navegador. Você também pode permitir seletivamente certos recursos, como scripts ou formulários, especificando valores de permissão adicionais.

<iframe src="https://example.com" sandbox="allow-scripts"></iframe>

Especifique um atributo de título para acessibilidade. Adicionar um atributo de título descritivo ao seu iFrame melhora a acessibilidade, especialmente para usuários que dependem de leitores de tela. O atributo de título fornece uma breve descrição do conteúdo, ajudando os usuários a entender o que é o conteúdo incorporado.

<iframe src="https://example.com" title="Interactive map of our location"></iframe>

Garanta um design responsivo. Às vezes, os iFrames podem atrapalhar a responsividade de uma página da web, especialmente em telas menores. Para garantir que o conteúdo do iFrame seja dimensionado corretamente em diferentes dispositivos, use CSS para tornar o iFrame responsivo. Você pode conseguir isso definindo a largura e a altura como porcentagens ou usando unidades de viewport, combinadas com restrições max-width e max-height.

iframe {

    width: 100%;

    height: auto;

    max-width: 600px;

    max-height: 400px;

}

Evite o uso excessivo de iFrames. Embora os iFrames sejam úteis, o uso excessivo leva a tempos de carregamento de página mais lentos, riscos de segurança e uma experiência ruim para o usuário. Sempre que possível, considere métodos alternativos, como usar APIs ou incorporar conteúdo diretamente na página em vez de depender de vários iFrames.
Defina uma política de referência. O atributo referrerpolicy controla a quantidade de informações de referenciador que são enviadas quando o conteúdo do iFrame é carregado. Isso pode ajudar a proteger a privacidade do usuário e evitar que informações confidenciais sejam compartilhadas com o conteúdo incorporado. Valores comuns incluem no-referrer, origin ou strict-origin-when-cross-origin.

<iframe src="https://example.com" referrerpolicy="no-referrer"></iframe>

Use o atributo de carregamento para melhorar o desempenho. O atributo loading ajuda a otimizar o desempenho da página adiando o carregamento de iFrames fora da tela até que sejam necessários (ou seja, quando estiverem perto da viewport). O valor lazy atrasa o carregamento, enquanto eager carrega o iFrame imediatamente.

<iframe src="https://example.com" loading="lazy"></iframe>

Defina permissões de permissão apropriadas. O atributo allow especifica quais recursos o conteúdo do iFrame tem permissão para usar, como geolocalização, acesso à câmera ou reprodução automática. Definir permissões precisas limita os recursos do conteúdo incorporado, aumentando a segurança e a privacidade do usuário.

<iframe src="https://example.com" allow="geolocation; microphone; camera"></iframe>

Considere políticas de origem cruzada. iFrames que carregam conteúdo de diferentes domínios podem introduzir desafios de segurança. Implemente políticas de compartilhamento de recursos de origem cruzada (CORS) no server hospedar o conteúdo do iFrame e usar X-Frame-Options ou os cabeçalhos Content-Security-Policy (CSP) para controlar quais sites podem incorporar seu conteúdo em um iFrame. Isso ajuda a evitar clickjacking e outras explorações de segurança.
Forneça conteúdo de reserva. Caso o iFrame não carregue ou esteja bloqueado, considere fornecer conteúdo de fallback dentro do tag. Este conteúdo será exibido se o iFrame não puder ser carregado, oferecendo uma melhor experiência ao usuário.

<iframe src="https://example.com">

    <p>Your browser does not support iFrames. Please visit <a href="https://example.com">this link</a> instead.</p>

</iframe>

Monitore o impacto no desempenho. iFrames podem deixar a performance da página mais lenta, especialmente se contiverem conteúdo pesado, como vídeos ou elementos interativos. Monitore regularmente o impacto dos iFrames no tempo de carregamento da sua página e otimize ou carregue lentamente os iFrames que não são imediatamente visíveis para o usuário.