Question

Im trying to get some html5 post messaging going with dojo 1.8, i’ve created a jsfiddle to try to explain it better. One thing to note is that the button is being loaded within the iframe. So basically if a click happens within the iframe then the parent node should receive and act upon the message. Any pointers would be appreciated.

http://jsfiddle.net/AvPFv/

Answer 1

Basically, you should listen for message on iframe window, i.e. iframe.contentWindow. Also, please note there is no dojo in your iframe.

I created a jsFiddle to show how it works: http://jsfiddle.net/phusick/H7Zh8/ but I’m afraid it is very messy to have everything in a single file, i.e. in the context of the parent window, because it does not explain properly where window reference points to and it does not simulate real world usage. I suggest you try it at localhost having two sets of scripts, one for parent window and one for iframe.

require([
    "dojo/dom",
    "dojo/on",
    "dojo/date/locale",
    "dojo/domReady!"        
], function(
    dom,
    on,
    locale    
) {

    var buttonNode = dom.byId("postMessageButton");
    var iframeNode = dom.byId("iframe");
    var iframe = iframeNode.contentWindow;
    var iframeButtonNode = iframe.document.getElementById("postMessageButton");

    on(buttonNode, "click", function() {
        iframe.postMessage("hello from parent", "*");       
    });

    on(iframe, "message", function(event) {
        var msgNode = iframe.document.getElementById("msg");
        msgNode.innerHTML += formatMessage(event);
        event.source.postMessage("echo from iframe", "*");
    });

    on(iframeButtonNode, "click", function() {
        iframe.parent.postMessage("hello from iframe", "*");
    })

    on(window, "message", function(event) {
        dom.byId("msg").innerHTML += formatMessage(event);
    });


    function formatMessage(event) {
        var time = locale.format(new Date(event.timeStamp),{
            selector: "time",
            formatLength: "medium"
        });
        return time + ": " + event.data + "<br>";
    }

});