卡在 postMessage 和 MessageChannel

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 方法的 third 参数没有任何内容。

所以我的问题是：

postMessage方法的第三个参数是什么意思？
我知道MessageChannel的用法，但是好像没用，Why/When要不要用MessageChannel？

Answer 1

MessageChannel 基本上是一个双向通信管道。将其视为 window.postMessage / window.onmessage 的替代品 - 但更简单且更可配置。

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

An object, the ownership of which is transferred to the receiving browsing context. In this case, we are transferring MessageChannel.port2 to the IFrame, so it can be used to receive the message from the main page.

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

卡在 postMessage 和 MessageChannel

Stuck in postMessage and MessageChannel

javascript

postmessage

message-channel