跨站点iframe postMessage从子到父

Question

我在浏览我的问题时从SO中找到了这个示例,但我想确切地知道如何在我的场景中使用它.我有一个来自另一个域的iframe,我想检测iframe url何时从另一个域中的一个页面更改为另一个页面.所以,我想的是在打开iframe的第二页时有类似的东西:

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

这就是我所需要的,我只需要收到iframe有不同网址的消息.现在在父页面上,我可能会有这样的事情:

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

我第一次尝试使用这个postMessage选项,所以每个建议都将非常感激.另外,我是否需要在子端包含一些JS库(如jquery)才能使其工作？

提前谢谢,Laziale

Answer 1

使用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 ('attachEvent' in obj){//IE
        obj.attachEvent('on'+evt,func);
    }
}

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

var secondPageValue='';

addAnEventListener(window,'message',iFrameListener);

Answer 2

检查http://davidwalsh.name/window-iframe.这是一个完美的工作示例.

父对象提供对子窗口的主窗口的引用.因此,如果我有一个iFrame并控制其中的父级,则控制台将显示:

// Every two seconds....
setInterval(function() {
    // Send the message "Hello" to the parent window
    // ...if the domain is still "davidwalsh.name"
    parent.postMessage("Hello","http://davidwalsh.name");
}, 3000);

既然我们现在拥有了窗口,我们可以将postMessage添加到它:

// Create IE + others compatible event handler
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) {
  console.log('parent received message!:  ',e.data);
},false);

上面的指令触发iFrame每隔3秒向父窗口发送一条消息.无需主窗口的初始消息!