Como se comunicar entre o iframe e o site pai?

O site no iframe não está localizado no mesmo domínio , mas ambos são meus e eu gostaria de me comunicar entre o iframesite e o pai. É possível?

Com domínios diferentes, não é possível chamar métodos ou acessar o documento de conteúdo do iframe diretamente.

Você precisa usar mensagens entre documentos .

Por exemplo, na janela superior:

 myIframe.contentWindow.postMessage('hello', '*');

e no iframe:

window.onmessage = function(e){
    if (e.data == 'hello') {
        alert('It works!');
    }
};

Se você estiver postando uma mensagem do iframe na janela pai

window.top.postMessage('hello', '*')

Deve estar aqui, porque resposta aceita de 2012

Em 2018 e navegadores modernos, você pode enviar um evento personalizado do iframe para a janela pai.

iframe:

var data = { foo: 'bar' }
var event = new CustomEvent('myCustomEvent', { detail: data })
window.parent.document.dispatchEvent(event)

pai:

window.document.addEventListener('myCustomEvent', handleEvent, false)
function handleEvent(e) {
  console.log(e.detail) // outputs: {foo: 'bar'}
}

PS: Claro, você pode enviar eventos na direção oposta da mesma maneira.

document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)

Esta biblioteca suporta navegadores HTML5 postMessage e herdados com redimensionamento + hash https://github.com/ternarylabs/porthole

Edit: Agora em 2014, o uso do IE6 / 7 é bastante baixo, o IE8 e, acima de tudo, o suporte, postMessageentão agora sugiro apenas usá-lo.

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage

a window.toppropriedade deve poder fornecer o que você precisa.

Por exemplo

alert(top.location.href)

Consulte http://cross-browser.com/talk/inter-frame_comm.html

Você também pode usar

postMessage(message, '*');

Use event.source.window.postMessagepara enviar de volta ao remetente.

Do Iframe

window.top.postMessage('I am Iframe', '*')
window.onmessage = (event) => {
    if (event.data === 'GOT_YOU_IFRAME') {
        console.log('Parent received successfully.')
    }
}

Então, dos pais, diga de volta.

window.onmessage = (event) => {
    event.source.window.postMessage('GOT_YOU_IFRAME', '*')
}