Html5 - Cross Browser Iframe postmessage - child to parent?

Dancer picture Dancer · Jan 11, 2012 · Viewed 85.2k times · Source

I've been following this tutorial - http://www.youtube.com/watch?v=R2hOvZ7bwXU, which basically explains how to use postmessage to securely pass a message between iframe and parent - you basically end up with something like this - http://html5demos.com/postmessage2

My problem is that I need it to work the opposite way round (child to parent) and dont know how to target the parent window.

this is my receiver code (in the parent) -

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

and this is the sender function that is triggered by a simple form (in child) -

   var text=$('.srchInput').val();
   window.parent.postMessage(text, "http://uc.dialogue.net");   

Should I be targeting the parent in a different way?

Cheers Paul

Answer

Dancer picture Dancer · Jan 13, 2012
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.