¿Cómo ha utilizado el elemento iframe en sus…

Utilicé <iframe> para:

Mostrar contenido de otros dominios: Integración de widgets externos (mapas, reproductores de video), bloques publicitarios, integraciones con servicios.
Crear entornos aislados: Ejecutar código JavaScript externo o estilos sin riesgo de afectar la página principal. Por ejemplo, para un sandbox al ver contenido de usuario o ejecutar editores de código.
Interacción entre dominios: Transferencia de datos entre la página principal y el contenido del <iframe> usando window.postMessage.
Incrustar páginas HTML estáticas: Mostrar parte de un sitio o documento sin navegación completa.

Ejemplo de uso con window.postMessage:

Página principal:

// Enviando un mensaje al iframe
const iframe = document.getElementById('my-iframe');
iframe.contentWindow.postMessage('hola desde el padre', 'https://trusted-domain.com');

// Recibiendo un mensaje del iframe
window.addEventListener('message', (event) => {
  // Verificar la fuente del mensaje por seguridad
  if (event.origin === 'https://trusted-domain.com') {
    console.log('Mensaje del iframe:', event.data);
  }
});

Página dentro del iframe:

// Recibiendo un mensaje de la página padre
window.addEventListener('message', (event) => {
  // Verificar la fuente del mensaje por seguridad
  if (event.origin === 'https://parent-domain.com') {
    console.log('Mensaje del padre:', event.data);

    // Enviar respuesta a la página padre
    event.source.postMessage('hola desde el iframe', event.origin);
  }
});

Ejemplo de incrustación de video:

<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>

Al trabajar con <iframe>, siempre se presta atención a la seguridad, especialmente al atributo sandbox y a verificar event.origin al usar window.postMessage. También se consideran aspectos de SEO, ya que el contenido del <iframe> se indexa por los motores de búsqueda.

¿Cómo ha utilizado el elemento iframe en sus proyectos?