Question

I need to test out a situation where I have a parent window hosting an iframe which will be empty. I need to use the iframe as a proxy between the parent and a cross-domain resource. I’ve created a simple jsfiddle that should attempt to post a message from the parent to the child iframe.

What I try to do in the parent’s javascript is have a handler for the child iframe, but for the life of me I cannot figure out the syntax to get it working correctly. I have tried using an addEvent helper to get the event properly added (for IE and everybody else) from examples I’ve seen in Modern Javascript Develop and Design:

addEvent: function(obj, type, fn) {
    if (obj && obj.addEventListener) {
        obj.addEventListener(type, fn, false);
    } else if (obj && obj.attachEvent) {
        obj.attachEvent('on' + type, fn);
    }
}

The way I’m currently trying to setup the handler for onmessage is as follows:

document.getElementById("frame1").onmessage = function(e) {
    alert(e.data);
};

I have also thought that maybe I need to be accessing the element’s contentWindow, but onmessage does not seem to exist.

Is there a property or way to access an iframe such that it appears like a window and would have an onmessage that could be handled?

Update

I can see the value of onmessage set to a function and even alert(…) out the value to see that it is indeed my intended function, but I do not see it called when postMessage is called on the child iframe.

Answer 1

Your implementation of postMessage is incorrect. The onmessage event has to be bound to the the frame’s window. Since the frame’s content is from a different origin, this can only be done at the frame’s side. You cannot bind this event from your page, due to the Same origin policy.

This code will work, provided that the Same origin policy is not in affect:

// Bind event to the frame's  window  object
var frame1_window = document.getElementById("frame1").contentWindow;
frame1_window.onmessage = function(e) {
    alert(e.data);
};
frame1_window.postMessage("Hello from same domain", "http://yourdomainhere.com");

Example (domain: jsfiddle.net): http://jsfiddle.net/zTctZ/3/show/
Example (domain: fiddle.jshell.net): http://jsfiddle.net/zTctZ/4/