Conteúdo Embutido

7.1 Elemento <iframe>

O elemento <iframe> em HTML é usado para embutir outro documento HTML no documento atual. Isso permite exibir o conteúdo de outras páginas web dentro do documento principal, criando uma oportunidade de integrar vários recursos, como vídeos, mapas, documentos e outras páginas web.

O elemento <iframe> cria um frame embutido que pode exibir outro documento HTML. Esse documento pode ser carregado de qualquer URL e funcionar de forma independente do documento principal.

Sintaxe:

    
      <iframe src="URL"></iframe>
    
  

Exemplo de uso:

    
      <iframe src="https://www.example.com" width="600" height="400" title="Exemplo de iframe"></iframe>
    
  

Atributos

• src: URL do documento que será carregado no <iframe>
• width: largura do frame (pode ser especificada em pixels ou porcentagens)
• height: altura do frame (pode ser especificada em pixels ou porcentagens)
• title: uma breve descrição do conteúdo do frame (importante para acessibilidade)
• name: nome do frame, que pode ser usado para direcionar links e formulários
• sandbox: define restrições para o conteúdo do frame, aumentando a segurança
• allow: determina quais funcionalidades podem ser usadas no <iframe> (por exemplo, allowfullscreen para modo tela cheia)

7.2 Atributo allowfullscreen

O atributo allowfullscreen permite ativar o modo tela cheia para o conteúdo carregado no <iframe>. Sem esse atributo, o conteúdo não poderá entrar em modo tela cheia.

Sintaxe:

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

Exemplo de uso:

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

O modo tela cheia permite que o usuário visualize vídeos ou outros recursos em tela cheia, melhorando a experiência do usuário.

7.3 Atributo allow

O atributo allow define quais funcionalidades podem ser usadas no <iframe>, como acesso à geolocalização, câmera, microfone e modo tela cheia.

Sintaxe:

    
      allow="geolocation; microphone; camera; fullscreen"
    
  

Exemplo de uso:

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

Vantagens:

• Controle sobre funcionalidades: permite especificar quais funções e APIs podem ser usadas pelo conteúdo embutido
• Gerenciamento de permissões: oferece flexibilidade no gerenciamento de acesso a diferentes funcionalidades, como geolocalização e câmera

7.4 Atributo sandbox

O atributo sandbox é usado para aplicar restrições ao conteúdo carregado no <iframe>. Ele impede a execução de determinadas ações, como execução de scripts ou abertura de pop-ups, aumentando assim a segurança.

Sintaxe:

    
      sandbox="allow-scripts allow-same-origin"
    
  

Valores do atributo sandbox:

• allow-forms: permite o envio de formulários
• allow-modals: permite o uso de janelas modais
• allow-orientation-lock: permite o bloqueio de orientação da tela
• allow-pointer-lock: permite o bloqueio do ponteiro
• allow-popups: permite a abertura de pop-ups
• allow-popups-to-escape-sandbox: permite que pop-ups escapem da sandbox
• allow-presentation: permite acesso à API de apresentações
• allow-same-origin: permite execução de scripts da mesma origem
• allow-scripts: permite execução de scripts
• allow-storage-access-by-user-activation: permite acesso ao armazenamento por ativação do usuário
• allow-top-navigation: permite navegação de nível superior
• allow-top-navigation-by-user-activation: permite navegação de nível superior por ativação do usuário

Exemplo de uso:

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

Vantagens:

• Segurança: impede a execução de scripts potencialmente maliciosos e limita a funcionalidade do conteúdo embutido
• Controle de acesso: permite aos desenvolvedores especificar exatamente quais funcionalidades são permitidas para o conteúdo embutido

7.5 Atributo loading

O atributo loading controla como o <iframe> é carregado, permitindo adiar o carregamento até que o elemento esteja visível na tela (carregamento preguiçoso).

Valores do atributo loading:

• lazy: adia o carregamento do <iframe> até que o elemento esteja visível
• eager: o carregamento do <iframe> ocorre imediatamente, independentemente de sua visibilidade

Sintaxe:

    
      loading="status"
    
  

Exemplo de uso:

    
      <iframe
        src="https://www.example.com"
        width="600"
        height="400"
        loading="lazy">
      </iframe>
    
  

Vantagens:

• Otimização de desempenho: o carregamento preguiçoso reduz a quantidade de dados carregados e acelera o tempo de carregamento da página
• Redução do uso de recursos: permite carregar apenas os elementos que o usuário realmente vê e usa