生成iframe並通過郵件發送問題進行通信

Question

這是我正在嘗試工作的示例代碼。儘管iframe從不寫入收到的消息。

var frame = document.createElement('iframe'); 
frame.setAttribute('src', 'about:blank'); 
window.document.body.appendChild(frame); 

var frameDoc = frame.contentWindow.document; 
frameDoc.body.appendChild(frameDoc.createTextNode('Hi!')); 

var code = 'window.addEventListener("message", function(){document.body.innerHTML = "Recieved Message"});'; 
var loaded = 'window.onload = function(){' + code + '};'; 
var val = '<scr' + 'ipt type="text/javascript">' + loaded + '</scr' + 'ipt>'; 

frameDoc.open(); 
frameDoc.write(val); 
frameDoc.close(); 

setTimeout(function(){ 
    console.log('posting message...'); 
    window.postMessage({ 
    foo: 'bar' 
    },'*'); 
}, 1000); 

的目標，我想最終達到JSDOM正在測試iframe的溝通，但我甚至不能在瀏覽器這個工作呢。

任何人有任何想法...？

Answer 1

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

語法

otherWindow.postMessage(message, targetOrigin, [transfer]); 

otherWindow

到另一個窗口的引用;這樣的參考可以使用iframe元件的contentWindow屬性，由window.open返回的 對象獲得， 例如，或通過在 window.frames命名或數字索引。

您在使用網頁的window對象，當你需要使用目標的window對象，如IFRAME。因此，您需要使用frame.contentWindow

frame.contentWindow.postMessage({ 
    foo: 'bar' 
},'*');