跨站点iframe postMessage从子项到父项 [英] cross site iframe postMessage from child to parent

问题描述

我在浏览时发现了此SO的示例我的问题，但我想知道如何在我的方案中使用它。
我有一个来自另一个域的iframe，并且我想要检测iframe url何时从另一个域中的另一个页面更改为另一个页面。所以，我在想的是当iframe中的第二页打开时有这样的事情：

 <脚本类型= 文本/ JavaScript的 > 
 $（document）.ready（function（）{
 parent.postMessage（Second Page）; 
} 
< / script> 
  

这就是我所需要的，我只需要接收iframe具有不同url的消息，现在在父页面上，我可能会有如下所示：

 < script type =text / javascript> 
 $（document）。 ready（function（）{
 $（'＃frame'）。load（function（）{
 var eventMethod = window.addEventListener？addEventListener：attachEvent; 
 var eventer = window [eventMethod]; 
 var messageEvent = eventMethod ==attachEvent？onmessage：message; 
 
 //从子窗口收听消息
 eventer（messageEvent ，函数（e）{
 var secondPageValue = //我想在这里从子页面获取值，我怎么做到这一点？
}，false）; 
}）; 
}）; 
< / script> 
  

这postMes第一次使用鼠尾草选项，所以每一个建议将不胜感激。
另外，我是否需要在子端包含一些JS库（如jquery）以使其工作？

在此先感谢，Laziale

解决方案

您需要在使用postMessage时设置targetOrigin。

 < script type =text / javascript> 
 $（document）.ready（function（）{
 parent.postMessage（Second Page，'*'）; 
} 
< / script> 
  

然后在主页上。

  function addAnEventListener（obj，evt，func）{
 if（'addEventListener'in obj）{
 obj.addEventListener（evt，func，false）; 
} else if（'objEvent'in obj）{// IE 
 obj.attachEvent（'on'+ evt，func）; 
} 
} 
 
函数iFrameListener（事件）{
 secondPageValue = event.data; 
} 
 
 var secondPageValue =''; 
 
 addAnEventListener（window，'message'，iFrameListener） ; 
  

I found this samplefrom SO while browsing for my problem, but I want to know exactly how to use it in my scenario. I have an iframe which is from another domain, and I want to detect when the iframe url is changed from one to another page in that other domain. So, what I was thinking is to have something like this when the 2nd page in the iframe is opened:

<script type="text/javascript">
    $(document).ready(function() {
parent.postMessage("Second Page");
}
</script>

That's all I need, I just need to receive message that the iframe has different url. Now on the parent page, I'll might have something like this:

<script type="text/javascript">
    $(document).ready(function() {
        $('#frame').load(function () { 
            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 secondPageValue = // I want to get the value from the child page here, how can I do that?
},false);               
        });
    });
</script>

I'm trying to use this postMessage option for first time, so every advice will be greatly appreciated. Also, do I need to include some JS libraries such as jquery on child side to make this work?

Thanks in advance, Laziale

解决方案

You need to set targetOrigin when using postMessage.

<script type="text/javascript">
    $(document).ready(function() {
       parent.postMessage("Second Page",'*');
    }
</script>

Then on the host page.

function addAnEventListener(obj,evt,func){
    if ('addEventListener' in obj){
        obj.addEventListener(evt,func, false);
    } else if ('attachEvent' in obj){//IE
        obj.attachEvent('on'+evt,func);
    }
}

function iFrameListener(event){
     secondPageValue = event.data;
}

var secondPageValue='';

addAnEventListener(window,'message',iFrameListener);

这篇关于跨站点iframe postMessage从子项到父项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！