Como ocorre a troca de dados entre iframe e a página…

Existem várias formas de trocar dados:

API PostMessage:

Método principal e seguro.
Permite enviar mensagens entre janelas (iframe/janela pai, janelas/pastas diferentes) de domínios diferentes.
É importante especificar a origin esperada para prevenir ataques XSS.

// Enviando do pai para o iframe
const iframeEl = document.getElementById('my-iframe');
iframeEl.contentWindow.postMessage('Olá do pai!', 'https://trusted-domain.com');

// Recebendo no iframe
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://parent-domain.com') {
        return; // Verifica o remetente
    }
    console.log('Mensagem recebida no iframe:', event.data);
});

// Enviando do iframe para o pai
window.parent.postMessage('Olá do iframe!', 'https://parent-domain.com');

// Recebendo no pai
window.addEventListener('message', function(event) {
    if (event.origin !== 'https://iframe-domain.com') {
        return; // Verifica o remetente
    }
    console.log('Mensagem recebida no pai:', event.data);
});

Acesso ao objeto window (apenas para Same-Origin):

Se o iframe e a página principal estiverem no mesmo domínio (Política de Mesma Origem), podem acessar diretamente os objetos window um do outro.

// No pai
const iframeEl = document.getElementById('my-iframe');
const iframeWindow = iframeEl.contentWindow;
iframeWindow.someVariable = 'Valor do pai';
iframeWindow.someFunction();

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

Hash de URL (#):

Método simples, porém limitado.
Pode transmitir pequenos dados alterando o hash na URL do iframe.
Mudanças no hash não recarregam a página.
Requer detectar mudanças no hash (por exemplo, via evento hashchange).

// No pai, para alterar o hash do iframe
const iframeEl = document.getElementById('my-iframe');
iframeEl.contentWindow.location.hash = 'data=some_value';

// No iframe, para ler o hash
window.addEventListener('hashchange', function() {
    const hash = window.location.hash;
    console.log('Hash alterado:', hash);
    // Parsear dados do hash
});

Alterar location.href (menos recomendado):
- Transmitir dados alterando a URL do iframe e recarregando.
- Não é adequado para trocas frequentes.

Armazenamentos compartilhados (Same-Origin):

localStorage e sessionStorage.
Se o iframe e a página principal estiverem no mesmo domínio, podem usar os mesmos armazenamentos.

// No pai
localStorage.setItem('sharedData', JSON.stringify({ value: 'Exemplo' }));

// No iframe
const data = JSON.parse(localStorage.getItem('sharedData'));
console.log('Dados do localStorage:', data);

A escolha do método depende da política de segurança (Política de Mesma Origem) e do volume/tipo de dados transmitidos. PostMessage é a solução mais flexível e segura para troca entre domínios diferentes.

Como ocorre a troca de dados entre iframe e a página principal?