dojo 1.8 integrating html5 postmessage

http://stackoverflow.com/questions/12381115/dojo-1-8-integrating-html5-postmessage

by phusick

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.8/dijit/themes/claro/claro.css">
<script id="iframeTemplate" type="text/template">
    <button 
        id="postMessageButton"
        style="position:fixed;right:5px;top:5px;"
    >postMessage to parent</button>
    <div id="msg" style="font-family:sans-serif;font-size:11px;"></div>
</script>

<iframe
    id="iframe"
    src="about:blank"
    onload="this.contentWindow.frames.document.body.innerHTML=document.getElementById('iframeTemplate').textContent"
></iframe>

<div>
    <button id="postMessageButton">postMessage to iframe</button>
    <div id="msg"></div>
</div>

CSS

body {
    font-family: sans-serif;
    font-size: 11px;
    padding: 30px;
}

.echo {
    color: #aaa;
}

JavaScript

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('<span class="echo">echo from iframe</span>', "*");
    });
    
    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>";
    }
    
});