HTML5的postMessage返回undefined

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.origin）

event.source.postMessage;

這樣：

event.source.postMessage（ '向你問好太'， 'http://example2.com'）;

但我得到這個以下錯誤：

無法投遞郵件http://example2.com。收件人有產地http://example1.com

爲什麼event.origin評估，以http://example1.com當從example2.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的通信;-)

附：如果這沒有幫助，請創建您的問題的jsfiddle。這將使我們更容易理解您遇到的問題...