Come comunicare tra iframe e il sito padre?

Il sito Web nell'iframe non si trova nello stesso dominio , ma entrambi sono miei e vorrei comunicare tra il iframesito padre e quello padre. È possibile?

Con domini diversi, non è possibile chiamare metodi o accedere direttamente al documento di contenuto dell'iframe.

Devi usare la messaggistica tra documenti .

Ad esempio nella finestra in alto:

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

e nell'iframe:

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

Se stai pubblicando un messaggio da iframe nella finestra principale

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

Deve essere qui, perché risposta accettata dal 2012

Nel 2018 e nei browser moderni puoi inviare un evento personalizzato da iframe alla finestra principale.

iframe:

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

genitore:

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

PS: Certo, puoi inviare eventi nella direzione opposta allo stesso modo.

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

Questa libreria supporta i postMessage e i browser legacy HTML5 con resize + hash https://github.com/ternarylabs/porthole

Modifica: ora nel 2014, l'utilizzo di IE6 / 7 è piuttosto basso, IE8 e soprattutto il supporto postMessagequindi ora suggerisco di usarlo.

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

la window.topproprietà dovrebbe essere in grado di dare ciò di cui hai bisogno.

Per esempio

alert(top.location.href)

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

Puoi anche usare

postMessage(message, '*');

Utilizzare event.source.window.postMessageper rispedire al mittente.

Da Iframe

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

Quindi dal genitore rispondi.

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