html - dojo1.8統合html5ポストメッセージ

Question

dojo 1.8でhtml5ポストメッセージングを実行しようとしていますが、それをよりよく説明するためにjsfiddleを作成しました。注意すべき点の1つは、ボタンがiframe内に読み込まれていることです。したがって、基本的にクリックがiframe内で発生した場合、親ノードはメッセージを受信して​​処理する必要があります。任意のポインタをいただければ幸いです。

http://jsfiddle.net/AvPFv/

Answer 1

基本的に、messageiframeウィンドウでリッスンする必要がありますiframe.contentWindow。また、dojoiframeには何もありませんのでご注意ください。

jsFiddleを作成して、その動作を示しました：http://jsfiddle.net/phusick/H7Zh8/しかし、すべてを1つのファイルに、つまり親ウィンドウのコンテキストに含めるのは非常に面倒です。window参照がどこを指しているかを適切に説明しておらず、実際の使用法をシミュレートしていません。親ウィンドウ用とiframe用の2セットのスクリプトがあるローカルホストで試してみることをお勧めします。

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>";
    }

});