javascript - 对页面和 iframe 之间的多条消息双向使用 MessageChannel()

问题描述

我正在使用 MessageChannel() 在页面和 iframe 之间传递消息。在我的场景中，iframe 是通信发起者，包含它的页面接收、转换并响应 iframe。

在实现系统时，我首先获取并保存了对传递给 iframe 的端口的引用，将其缓存并继续将其用于每次后续通信。

框架：

 window.onmessage = (e) => {
    console.log("iframe port established");
    //using this port for all following communications
    parentPort = e.ports[0];
    onmessage = establishedConnectionHandler; 
  }

我正在通过 parentPort 运行从 iframe 到父级的所有后续通信：

parentPort.postMessage({command, guid, message});

即使文档声明消息通道是一次性通信，这似乎也可以工作并且使发起通信变得方便。

我的问题 - 这是受支持的功能还是我在利用未定义的行为？

这是来源。

编辑 - 我一定误解了示例MDN的意图：

button.onclick = function(e) {
    e.preventDefault();

    var channel = new MessageChannel();
    otherWindow.postMessage(textInput.value, '*', [channel.port2]);

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

这在 Kaiido 的 Plunker 示例中进行了重构。

标签： javascriptiframemessage-channel

解决方案

这不是很清楚你在做什么，甚至在 github 上阅读你的代码......

您似乎混淆了 WindowObject.postMessage 方法和 MessagePort 的方法。WindowObject 的一个只能在协商部分使用一次。
因此，让我们退后一步，更基本地解释应该如何理解事物：

您应该将消息通道视为酸奶罐电话® ^_[pdf]。

                   –––––                         –––––
                po(r)t1 |~~~~~~~~~~~~~~~~~~~~~~~| po(r)t2
                   –––––                         –––––

一个用户必须创建它。
然后他会将其中一个 po(r)ts 给（转移）给另一个用户。
一旦完成，每个用户只能访问自己的 po(r)t。
因此，为了能够接收来自其他用户的消息，他们必须将耳朵放在自己的 po(r)t 上（附加一个事件处理程序）。
并且要发送消息，他们会在他们仍然拥有的唯一 po(r)t 中说出消息（postMessage），就像他们正在收听的一样。

所以要添加一些代码行，你应该做的是：

生成Yoghurt-pot 电话® 又名 MessageChannel。
```
var yoghurt_phone = new MessageChannel();
```

保留其中一个 po(r)t 并将另一个给另一个用户（iframe）。为此，我们使用 WindowObject。postMessage 方法，它与我们将用于通过 MessagePorts 进行通信的方法不同。

mains_yoghurt_pot = yoghurt_phone.port1;
frame.contentWindow.postMessage( // this is like a physical meeting
  'look I made a cool Yoghurt-phone', // some useless message
  '*', // show your id?
  [yoghurt_phone.port2] // TRANSFER the po(r)t
);

从框架中，接收 po(r)t 并保持紧。

window.onmessage = function physicalMeeting(evt) {
  if(evt.ports && evt.ports.length) { // only if we have been given a po(r)t
    frames_yoghurt_pot = evt.ports[0];
    // ...

从现在开始，每个用户都有自己的 po(r)t，并且只有一个 po(r)t。因此，在两端，您需要在自己的单个 po(r)t 上设置侦听器。
```
// from main doc
mains_yoghurt_pot.onmessage = frameTalksToMe;
```
```
// from iframe doc
frames_yoghurt_pot.onmessage = mainTalksToMe;
```

然后，当两个用户中的一个想要告诉另一个用户时，他们会从自己的 po(r)t中进行操作。

// from main doc
mains_yoghurt_pot.postMessage('hello frame');

// or from iframe doc
frames_yoghurt_pot.postMessage('hello main');

将 OP 的代码固定为 plunker。

javascript - 对页面和 iframe 之间的多条消息双向使用 MessageChannel()

问题描述

解决方案

推荐阅读