Comment communiquer entre l'iframe et le site parent ?

Question

Le site web dans l'iframe n'est pas situé dans le même domaine mais les deux sont les miens, et je voudrais communiquer entre les iframe et le site parent. Est-ce possible ?

Answer 1

Avec des domaines différents, 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-documents .

parent -> iframe

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!');
    }
};

iframe -> parent

Par exemple, dans la fenêtre du haut :

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

et dans l'iframe :

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

Answer 2

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)

Answer 3

Cette bibliothèque prend en charge HTML5 postMessage et les anciens navigateurs avec resize+hash. https://github.com/ternarylabs/porthole

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

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

Answer 4

Utilice event.source.window.postMessage à renvoyer à l'expéditeur.

De Iframe

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

Ensuite, le parent répond.

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

Answer 5

Le site window.top La propriété devrait être en mesure de donner ce dont vous avez besoin.

Par exemple

alert(top.location.href)

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