Html5 - 跨浏览器iframe postmessage - 孩子到父母？ [英] Html5 - Cross Browser Iframe postmessage - child to parent?

问题描述

我一直在关注本教程 - 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）; 
  

，这是由简单表单触发的发送者函数（在child中） -

  var text = $（'。srchInput'）。val（）; 
 window.parent.postMessage（text，http://uc.dialogue.net）; 
  

我应该以不同的方式瞄准父母吗？

干杯
保罗

解决方案

  var eventMethod = window。 addEventListener？ addEventListener：attachEvent; 
 var eventer = window [eventMethod]; 
 var messageEvent = eventMethod ==attachEvent？ onmessage：消息; 
 
 //收听来自子窗口的消息
 eventer（messageEvent，function（e）{
 var key = e.message？message：data; 
 var data = e [key]; 
 // run function // 
}，false）; 
  

在父页面中处理上述内容，并在子页面中处理以下内容 -

  parent.postMessage（loadMyOrders，*）; //任何域上的```
  

从这里。

I've been following this tutorial - http://www.youtube.com/watch?v=R2hOvZ7bwXU, which basically explains how to use postmessage to securely pass a message between iframe and parent - you basically end up with something like this - http://html5demos.com/postmessage2

My problem is that I need it to work the opposite way round (child to parent) and dont know how to target the parent window.

this is my receiver code (in the parent) -

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

and this is the sender function that is triggered by a simple form (in child) -

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

Should I be targeting the parent in a different way?

Cheers Paul

解决方案

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

Got it to work with the above in the parent page and the following in the child page -    

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

Code copied from here.

这篇关于Html5 - 跨浏览器iframe postmessage - 孩子到父母？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！