Question

我对postMessage和MessageChannel感到困惑。

以下是MDN的一些代码：

var channel = new MessageChannel();
var para = document.querySelector('p');

var ifr = document.querySelector('iframe');
var otherWindow = ifr.contentWindow;

ifr.addEventListener("load", iframeLoaded, false);

function iframeLoaded() {
  otherWindow.postMessage('Hello from the main page!', '*', [channel.port2]);
}

channel.port1.onmessage = handleMessage;
function handleMessage(e) {
  para.innerHTML = e.data;
}

我认为postMessage方法只能使用两个参数，上面的代码显示它可以采用三个，但没有任何内容postMessage方法的第三个参数。

所以有我的问题：

postMessage方法第三个参数的含义是什么？
我知道MessageChannel的用法，但似乎没用，为什么/何时应该使用MessageChannel？

Answer 1

MessageChannel基本上是一个双向通信管道。可以把它想象成window.postMessage / window.onmessage的替代品 - 但更简单，更易于配置。

This guide解释了postMessage的第三个参数的含义：

一个对象，其所有权转移到接收浏览上下文。在这种情况下，我们将MessageChannel.port2转移到IFrame，因此它可用于接收来自主页。

P.S。我发现this guide from Opera比Mozilla更容易阅读。

陷入postMessage和MessageChannel

1 个答案: