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

Question

我在浏览我的问题时从 SO 中找到了this sample，但我想确切地知道如何在我的场景中使用它。

我有一个来自另一个域的 iframe，我想检测 iframe URL 何时从另一个域中的一个页面更改为另一个页面。所以，我想的是当 iframe 中的第二页打开时有这样的东西：

<script type="text/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";

// 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）才能完成这项工作？

Answer 1

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

既然我们现在已经控制了窗口，我们可以向它发送消息：

// 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 秒向父窗口发送一条消息。不需要来自主窗口的初始消息！

Answer 2

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