¿Cómo se realiza el intercambio de datos entre iframe…

Existen varias formas de intercambiar datos:

API PostMessage:

Método principal y seguro.
Permite enviar mensajes entre ventanas (iframe/ventana principal, diferentes ventanas/pestañas) de diferentes dominios.
Es importante especificar el origin esperado para prevenir ataques XSS.

// Envío desde la ventana principal al iframe
const iframeEl = document.getElementById('my-iframe');
iframeEl.contentWindow.postMessage('¡Hola desde el padre!', 'https://trusted-domain.com');

// Recepción en el iframe
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://parent-domain.com') {
        return; // Verifica el remitente
    }
    console.log('Mensaje recibido en el iframe:', event.data);
});

// Envío desde el iframe a la ventana principal
window.parent.postMessage('¡Hola desde el iframe!', 'https://parent-domain.com');

// Recepción en la ventana principal
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://iframe-domain.com') {
        return; // Verifica el remitente
    }
    console.log('Mensaje recibido en el padre:', event.data);
});

Acceso al objeto window (solo para Same-Origin):

Si el iframe y la página principal están en el mismo dominio (Política de Mismo Origen), pueden acceder directamente a los objetos window del otro.

// En la ventana principal
const iframeEl = document.getElementById('my-iframe');
const iframeWindow = iframeEl.contentWindow;
iframeWindow.someVariable = 'Valor desde el padre';
iframeWindow.someFunction();

// En el iframe
const parentWindow = window.parent;
console.log(parentWindow.someVariable);
parentWindow.someOtherFunction();

Hash de URL (#):

Método simple pero limitado.
Se pueden transmitir pequeños datos modificando el hash en la URL del iframe.
Los cambios en el hash no recargan la página.
Requiere detectar cambios en el hash (por ejemplo, mediante el evento hashchange).

// En la ventana principal, para cambiar el hash del iframe
const iframeEl = document.getElementById('my-iframe');
iframeEl.contentWindow.location.hash = 'data=some_value';

// En el iframe, para leer el hash
window.addEventListener('hashchange', function() {
    const hash = window.location.hash;
    console.log('El hash cambió:', hash);
    // Parsear datos del hash
});

Cambiar location.href (menos recomendable):
- Transmitir datos modificando la URL del iframe y recargando.
- No es adecuado para intercambios frecuentes.

Almacenamiento compartido (Same-Origin):

localStorage y sessionStorage.
Si el iframe y la página principal están en el mismo dominio, pueden usar los mismos almacenamientos.

// En la ventana principal
localStorage.setItem('sharedData', JSON.stringify({ value: 'Ejemplo' }));

// En el iframe
const data = JSON.parse(localStorage.getItem('sharedData'));
console.log('Datos desde localStorage:', data);

La elección del método depende de la política de seguridad (Política de Mismo Origen) y del volumen/tipo de datos transmitidos. PostMessage es la solución más flexible y segura para intercambios entre dominios diferentes.

¿Cómo se realiza el intercambio de datos entre iframe y la página principal?