Comment communiquer entre iframe et le site parent?

Le site Web dans l'iframe ne se trouve pas dans le même domaine , mais les deux sont à moi, et j'aimerais communiquer entre le iframeet le site parent. C'est possible?

Avec différents domaines, il n'est pas possible d'appeler des méthodes ou d'accéder directement au document de contenu de l'iframe.

Vous devez utiliser la messagerie inter-document .

Par exemple dans la fenêtre du haut:

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

et dans l'iframe:

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

Si vous publiez un message d'iframe dans la fenêtre parent

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

Il doit être ici, car réponse acceptée de 2012

En 2018 et dans les navigateurs modernes, vous pouvez envoyer un événement personnalisé de l'iframe à la fenêtre parent.

iframe:

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

parent:

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

PS: Bien sûr, vous pouvez envoyer des événements dans la direction opposée de la même manière.

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

Cette bibliothèque prend en charge les navigateurs HTML5 postMessage et hérités avec redimensionnement + hachage https://github.com/ternarylabs/porthole

Edit: Maintenant, en 2014, l'utilisation d'IE6 / 7 est assez faible, IE8 et surtout le support, postMessagedonc je suggère maintenant de simplement l'utiliser.

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

la window.toppropriété doit pouvoir donner ce dont vous avez besoin.

Par exemple

alert(top.location.href)

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

Vous pouvez aussi utiliser

postMessage(message, '*');

Utilisez event.source.window.postMessagepour renvoyer à l'expéditeur.

Depuis Iframe

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

Puis de la part des parents, répondez.

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