Comment communiquer entre iframe et le site parent?

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

InformationsquelleAutor Danny Fox | 2012-02-05

277

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

Vous devez utiliser la croix-document de messagerie.

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 envoyez une message à partir de l'iframe de la fenêtre parent
```
window.top.postMessage('hello', '*')
```
- merci, mais malheureusement ça ne fonctionne pas dans les navigateurs plus anciens.
- Droit, il ne fonctionne pas dans IE<=7
- Cela fonctionne également à partir de l'iframe de parent?
- Il n'est en effet.
- Pouvez-vous mettre un exemple simple?
- Dans le parent: window.onmesage = function().... Dans l'iframe: window.top.postMessage('hello', '*')
- quand je fais cela, je reçois deux erreurs dans la console chromée, mais encore, il fonctionne. Unsafe JavaScript attempt to access frame with URL file:///iframe.html from frame with URL file:///parent.html. Domains, protocols and ports must match.
- Qui peut être dû à un bug dans Chrome: code.google.com/p/chromium/issues/detail?id=94618
- Ce n'est pas un bug. Url de fichier peut être très dangereux, et que les navigateurs sont de les traiter, de plus en plus de soins. De retour dans les vieux jours, vous pouvez mettre un lien vers file://C:/Windows/system32/whatever sur une page web et d'en faire le point de droit dans le système de l'utilisateur dossier. Ces jours-ci la plupart des navigateurs ignorer les clics sur des liens comme ça. Exécuter un serveur web et d'accéder à votre code grâce à cela et vous verrez les erreurs diappear.
- Pouvez-vous fournir une démo s'il vous plaît. @Pumbaa80
- Comme une bonne pratique, ne jamais utiliser le '*' pour votre cible. En fait, MDN a dit "Toujours fournir un targetOrigin, pas *, si vous savez où l'autre de la fenêtre de document. À défaut de fournir une cible spécifique divulgue les données que vous envoyez à un site malveillant."
- On peut même utiliser window.frames[index] pour obtenir de l'image enfant (<iframe>, <object>, <frame>), équivalent à getElementsByTagName("iframe")[index].contentWindow. Pour obtenir de la Fenêtre Parent de l'Objet à partir des IFrames, il est préférable d'utiliser window.parent, comme window.top représente le Plus Haut de la Fenêtre Parent
InformationsquelleAutor user123444555621
28

Il doit être ici, parce que accepté de répondre à partir de 2012

En 2018 et des navigateurs modernes, vous pouvez envoyer un événement personnalisé à partir de l'iframe de 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)
```
- Bonjour, dois-je être sur le même domaine pour le faire ?
- stackoverflow.com/questions/25098021/...
- Il convient de noter que dispatchEvent est pris en charge dans tous les principaux navigateurs. IE9 a été la première version, il est venu, donc la plupart des OSs maintenant de travailler avec elle. caniuse.com/#search=dispatchEvent
- Je ne suis pas en mesure de communiquer d'un parent à l'iframe avec cette méthode.
InformationsquelleAutor Stranger in the Q
14

Cette bibliothèque prend en charge le HTML5 postMessage et les anciens navigateurs avec redimensionnement+de hachage https://github.com/ternarylabs/porthole

Edit: Maintenant, en 2014, IE6/7 utilisation est assez faible, IE8 et surtout à soutenir postMessage j'ai donc maintenant de suggérer à l'utiliser.

https://developer.mozilla.org/en-US/docs/Web/API/Window.postMessage
- Avec la mise en garde que IE8/9 uniquement en charge les chaînes de caniuse.com/#search=postmessage (Voir problèmes connus)
- cela peut être contourné par l'encodage de votre événement objets json et de les décoder, de l'autre côté.
InformationsquelleAutor jpillora
3

la window.top propriété doit être en mesure de donner ce dont vous avez besoin.

E. g.
```
alert(top.location.href)
```
Voir
http://cross-browser.com/talk/inter-frame_comm.html
- Comme l'iframe n'est pas sur le même domaine, il ne peut pas accéder à son parent.
InformationsquelleAutor sambomartin
0

Vous pouvez également utiliser

postMessage(message, '*');

InformationsquelleAutor gonzarodriguezt

Vous devez vous connecter pour publier un commentaire.