HTML5 - Cross Browser iframe postMessage - enfant à parent?

Question

J'ai suivi ce tutoriel - http://www.youtube.com/watch?v=R2hOvZ7bwXU, qui explique comment utiliser postMessage pour passer un message de manière sécurisée entre un iframe et le parent - vous finissez essentiellement avec quelque chose comme ceci - http://html5demos.com/postmessage2

Mon problème est que j'ai besoin que cela fonctionne dans le sens opposé (de l'enfant vers le parent) et je ne sais pas comment cibler la fenêtre parent.

voici mon code de réception (dans le parent):

function handleMsg(e) {
    if(e.origin == "http://uc.dialogue.net") {
        let blah = e.data;
        alert(blah);    
    } else {
        alert("error");
    }
}
addEventListener("message", handleMsg, true);

et voici la fonction d'envoi déclenchée par un simple formulaire (dans l'enfant):

   let text = document.querySelector('.srchInput').value;
   window.parent.postMessage(text, "http://uc.dialogue.net");   

Dois-je cibler le parent d'une manière différente?

Amicalement Paul

Answer 1

var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Écouter le message de la fenêtre enfant
eventer(messageEvent,function(e) {
    var key = e.message ? "message" : "data";
    var data = e[key];
    //exécuter la fonction//
},false);

Ça a marché avec le code ci-dessus dans la page parent et le suivant dans la page enfant -

parent.postMessage("loadMyOrders","*");  //  `*` sur n'importe quel domaine        

Code copié depuis ici.

Answer 2

Le code suivant est adapté grâce à la spécification plus récente de ecma262, en abandonnant le support ie8:

window.addEventListener('message', e => {
    const key = e.message ? 'message' : 'data';
    const data = e[key];

    // ...
},false);

Documentation pertinente:

• http://caniuse.com/#feat=addeventlistener
• https://developer.mozilla.org/en-US/docs/Web/API/Window/message_event#Examples

Answer 3

Ceci est une version React basée sur la réponse de Avindra Goolcharan:

const MessageHandler = ({ allowedUrl, handleMessage }) => {
  useEffect(() => {
    const handleEvent = event => {
      const { message, data, origin } = event;
      if (origin === allowedUrl) {
        handleMessage(message || data);
      }
    };

    window.addEventListener('message', handleEvent, false);
    return function cleanup() {
      window.removeEventListener('message', handleEvent);
    };
  });

  return ;
};

Où allowedUrl est l'URL chargée dans l' iframe et handleMessage est une fonction connectée à redux (ou autre forme de gestion d'état) permettant au reste de l'application de prendre connaissance du message reçu.