Html5 - 跨浏览器iframe postmessage - 孩子到父母？

Question

我一直在关注这个教程 - http://www.youtube.com/watch?v=R2hOvZ7bwXU,它基本上解释了如何使用postmessage在iframe和父级之间安全地传递消息 - 你基本上最终会得到这样的东西 - http://html5demos.com/postmessage2

我的问题是我需要它以相反的方式工作(子到父)并且不知道如何定位父窗口.

这是我的接收者代码(在父母中) -

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);

这是由简单表格(在孩子中)触发的发件人功能 -

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

我应该以不同的方式定位父母吗？

干杯保罗

Answer 1

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);

在父页面和子页面中的以下内容中使用它 -    

parent.postMessage("loadMyOrders","*");  //  `*` on any domain         

代码从这里复制.

Answer 2

接受答案的现代简化版本(删除了遗留的ie8支持,使代码更具可读性):

window.addEventListener('message',function(e) {
    var key = e.message ? 'message' : 'data';
    var data = e[key];
    //run function//
},false);

请参阅:

• http://caniuse.com/#feat=addeventlistener
• http://youmightnotneedjquery.com/