Como você usou o elemento iframe em seus projetos?

Utilizei <iframe> para:

• Mostrar conteúdo de outros domínios: Inserção de widgets externos (mapas, reprodutores de vídeo), blocos de publicidade, integrações com serviços.
• Criar ambientes isolados: Executar código JavaScript externo ou estilos sem risco de afetar a página principal. Por exemplo, para uma sandbox ao visualizar conteúdo de usuário ou executar editores de código.
• Interação entre domínios: Transferência de dados entre a página pai e o conteúdo do <iframe> usando window.postMessage.
• Incorporar páginas HTML estáticas: Mostrar parte de um site ou documento sem navegação completa.

Exemplo de uso com window.postMessage:

Página pai:

// Enviando mensagem ao iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('olá do pai', 'https://trusted-domain.com');

// Recebendo mensagem do iframe
window.addEventListener('message', (event) => {
  // Verificar a origem da mensagem por segurança
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Mensagem do iframe:', event.data);
  }
});

Página dentro do iframe:

// Recebendo mensagem da página pai
window.addEventListener('message', (event) => {
  // Verificar a origem da mensagem por segurança
  if (event.origin === 'https://parent-domain.com') {
    console.log('Mensagem do pai:', event.data);

    // Enviar resposta à página pai
    event.source.postMessage('olá do iframe', event.origin);
  }
});

Exemplo de incorporação de vídeo:

<iframe
  src="https://www.youtube.com/embed/VIDEO_ID"
  width="560"
  height="315"
  frameborder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowfullscreen
></iframe>

Ao trabalhar com <iframe>, é sempre importante prestar atenção à segurança, especialmente ao atributo sandbox e à verificação de event.origin ao usar window.postMessage. Também deve-se considerar aspectos de SEO, pois o conteúdo do <iframe> é indexado pelos motores de busca.