从子站点到父站点的跨站点iframe postMessage

Question

在浏览我的问题时，我从SO找到了这个sample，但我想知道在我的场景中如何使用它。我有一个来自另一个域的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秒向父窗口发送一条消息。不需要来自主窗口的初始消息！