生成 iframe 并通过 post 消息问题进行通信

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

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

A reference to another window; such a reference may be obtained, for example, using the contentWindow property of an iframe element, the object returned by window.open, or by named or numeric index on window.frames.

当您需要使用目标的 window 对象（例如 iframe）时，您正在使用页面的 window 对象。因此，您需要使用 frame.contentWindow

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

生成 iframe 并通过 post 消息问题进行通信

Generate iframe and communicate via post message issues

html

javascript

iframe

communication

postmessage