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

跨站点iframe postMessage从子到父

2 个答案: