生成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' 
},'*');