HTML5 - Cross Browser iframe postMessage - child to parent?

This is a React version based on Avindra Goolcharan's answer:

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 <React.Fragment />;
};

Where allowedUrl is the URL loaded within the iframe and handleMessage is a redux-connected function (or other form of state management) letting the rest of the app know about the received message.

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

// Listen to message from child window
eventer(messageEvent,function(e) {
    var key = e.message ? "message" : "data";
    var data = e[key];
    //run function//
},false);

Got it to work with the above in the parent page and the following in the child page -    

parent.postMessage("loadMyOrders","*");  //  `*` on any domain         

Code copied from here.

Unpacked the accepted answer using newer ecma262 spec, and dropping ie8 support:

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

    // ...
},false);

Relevant documentation:

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