¿Cómo comunicarse entre iframe y el sitio principal?

El sitio web en el iframe no está ubicado en el mismo dominio , pero ambos son míos, y me gustaría comunicarme entre el iframey el sitio principal. ¿Es posible?

Con diferentes dominios, no es posible llamar a métodos o acceder directamente al documento de contenido del iframe.

Tienes que utilizar la mensajería entre documentos .

Por ejemplo en la ventana superior:

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

y en el iframe:

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

Si está publicando un mensaje desde iframe a la ventana principal

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

Debe estar aquí, porque respuesta aceptada de 2012

En 2018 y en los navegadores modernos, puede enviar un evento personalizado desde iframe a la ventana principal.

iframe:

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

padre:

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

PD: Por supuesto, puede enviar eventos en la misma dirección opuesta.

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

Esta biblioteca es compatible con HTML5 postMessage y navegadores heredados con cambio de tamaño + hash https://github.com/ternarylabs/porthole

Editar: Ahora, en 2014, el uso de IE6 / 7 es bastante bajo, IE8 y, sobre todo, el soporte, postMessagepor lo que ahora sugiero usarlo.

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

La window.toppropiedad debe poder darte lo que necesitas.

P.ej

alert(top.location.href)

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

Úselo event.source.window.postMessagepara enviar de vuelta al remitente.

Desde Iframe

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

Luego, de los padres, responda.

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

También puedes usar

postMessage(message, '*');