Question

我正在尝试使用postMessage在页面（在example1.com上）和在example2.com上的同一页面上的iframe之间进行跨域通信

当iframe完成加载时，它会使用以下命令将postMessage发送到父页面：

parent.postMessage（'hello parent'，'http：//example1.com'）; //此命令有效

在父页面的postMessage事件处理程序中（在example1.com上），我使用以下函数将响应发送回子页面（example2.com）：

//this function is defined in example1.com:

function receiveMessage(event){

    if (event.origin == "http://example2.com"){

        console.log('Message Received from iframe'); //this line works

        event.source.postMessage('hello to you too', event.origin); //this line does not work

    }

}

由于某种原因，iframe中的postMessage事件处理程序未被触发。

//this function is defined in example2.com

function receiveMessage(event){

    if (event.origin == "http://example1.com"){ // I even tried removing this check to no avail

        console.log('Message Received from parent'); //this line works

    }

}

当父母试图向iframe发送消息时，它只返回undefined。

感谢任何帮助！

编辑：

我尝试在example1.com的receiveMessage事件中更改以下行：

event.source.postMessage（'你好也是'，event.origin）;

到此：

event.source.postMessage（'你好也是'，'http：//example2.com'）;

但我得到以下错误：

无法向http://example2.com发送消息。收件人来源http://example1.com

为什么event.origin在收到来自example2.com的消息时会评估http://example1.com？

example1.com正在尝试向自己发送postMessage。这应该是错误的来源

Answer 1

有时postMessage可能非常不清楚哪个帧发送和哪个帧接收。出于这个原因，我创建了一个小脚本来帮助解开帧之间的通信。

将以下代码段添加到您的页面并观察您的控制台以查看会发生什么。在与postMessage开始帧间通信之前，请确保将其添加到页面中。

  var listener = function (e) {
    console.log('Caught ', e.type, ' event from ', e.source.self, ' to ', e.target, ' origin ', e.origin, ' with data ', e.data, '. Full details: ', e);
  };

  function addToFrame(el) {
    var frames = el.querySelectorAll('iframe'), ifrm = 0;
    for (var i = 0; i < frames.length; i++) {
      frames[i].contentWindow.addEventListener("message", listener, true);
      ifrm += addToFrame(frames[i].contentWindow.document);
    }
    return i + ifrm;
  }

  window.addEventListener("message", listener, true);
  var c = addToFrame(document);
  console.log('Recursively added listener to main window and', c, 'frames');

在您的控制台中，它清楚地说明哪个帧发送到哪个其他帧。有关详细信息，请参阅我在my site上为您准备的博客文章。

我希望这有助于搞清楚iframe的沟通; - ）

P.S。如果这没有帮助，请创建jsfiddle您的问题。这将使我们更容易理解您遇到的问题......

HTML5 postMessage返回undefined

1 个答案: