Comment utiliser correctement PostMessage pour effectuer des messages multidimensionnels avec les navigateurs html5 et modernes? J'ai toujours des erreurs

Je suis sûr que quelque chose ne va pas ici, mais je ne peux pas tout mettre en main … L'exemple ici se comporte bien, sans avis ni erreur sur la console. Cela signifie que mon navigateur prend en charge la messagerie de domaine avec html5 (de Bien sûr, c'est Chrome 14 …).

Mon code fait plus ou moins ce qui suit: un script chargé sur WebsiteA.com a créé un iframe et l'ajoute au document de WebsiteA.com. Le cadre ajouté contient WebsiteB.com et lorsqu'il est chargé, il doit envoyer un message à son parent, WebsiteA.com, pour lui dire que WebsiteB.com est prêt à recevoir un JSON. Lorsque WebsiteA.com reçoit ce message, il renvoie le JSON.

Donc WebsiteA.com a une ligne juste avant </body> comme ceci: <script scr="http://WebsiteB.com/load-my-iframe.js" type="text/javascript"></script> , Et à l'intérieur de la load-my-iframe.js , j'ai ce qui suit:

 var child = document.createElement('iframe'); child.src = 'http://WebsiteB.com/child.html'; var body = document.getElementsByTagName('body')[0] body.appendChild(child); var SomeJSON = {"something" : "that WebsiteB should have"}; window.onmessage = function (e) { if (e.origin === 'http://WebsiteB.com' && e.data === 'ready') { e.source.postMessage(SomeJSON, 'http://WebsiteB.com'); } }

Donc, cela crée l'élément iframe, l'ajoute au document de WebsiteA.com et attend qu'il dise qu'il est prêt (je suppose …). Sur WebsiteB.com, j'ai le fichier child.html qui est src de l'iframe chargé dans le document de WebsiteA.com et que ce fichier est le suivant:

 <!DOCTYPE html> <html lang="pt"> <head> <title>WebsiteB.com</title> <script type="text/javascript"> window.onload = function () { window.parent.postMessage('ready','*'); } window.addEventListener('message', receiveMessage, false); function receiveMessage(event) { if (event.data.something === "that WebsiteB should have") { document.write('It worked!'); } } </script> </head> <body> </body> </html>

Et maintenant, les choses bizarres:

Malheureusement, je ne possède pas WebsiteA.com et WebsiteB.com, mais j'ai réussi à ce que cela fonctionne entre un domaine de premier niveau et un sous-domaine (qui se termine par .no.de). Cela fonctionne vraiment, MAIS dans la console de Google Chrome 14, j'obtiens la Unsafe JavaScript attempt to access frame with URL http://WebsiteA.com/ from frame with URL http://WebsiteB.com/child.html . Domains, protocols and ports must match. classique Unsafe JavaScript attempt to access frame with URL http://WebsiteA.com/ from frame with URL http://WebsiteB.com/child.html . Domains, protocols and ports must match. Unsafe JavaScript attempt to access frame with URL http://WebsiteA.com/ from frame with URL http://WebsiteB.com/child.html . Domains, protocols and ports must match. . L' exemple de html5demos fonctionne très bien sans cette erreur.

Pourquoi puis-je obtenir cette erreur et comment puis-je m'en débarrasser?

Je viens d'essayer votre code et cela semble fonctionner dans Chrome. Il utilise jsfiddle et jsbin pour transmettre des messages entre les fenêtres parent et enfants.

http://jsbin.com/oxesef/4/edit#preview

Ce n'est pas la réponse mais pourrait vous aider.

J'utilise http://easyxdm.net/wp/ pour éviter ce genre de problèmes.

Carl