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 iframe et 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 messagerie entre documents .
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 vers la fenêtre parente
window.top.postMessage('hello', '*')
Il doit être ici, car réponse acceptée à partir de 2012
En 2018 et dans les navigateurs modernes, vous pouvez envoyer un événement personnalisé d'iframe à la fenêtre parente.
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 en sens inverse de la même manière.
document.querySelector('#iframe_id').contentDocument.dispatchEvent(event)
Cette bibliothèque prend en charge HTML5 postMessage et les navigateurs hérités avec resize + hash https://github.com/ternarylabs/porthole
Edit: maintenant en 2014, l'utilisation d'IE6/7 est assez faible, IE8 et surtout supporte postMessage alors je suggère maintenant de l'utiliser.
https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
la propriété window.top devrait pouvoir vous donner ce dont vous avez besoin.
Par exemple.
alert(top.location.href)