如何通过 MessageChannel 建立两个独立 iframe 之间的高频低延迟数据通道-js教程-PHP中文网

不能。浏览器禁止跨 iframe 直接传递 messageport 实例，即使同源；必须由父页面创建 messagechannel 并分别向两个 iframe 分发 port1 和 port2，且接收方需立即调用 port.start() 才能通信。

如何通过 messagechannel 建立两个独立 iframe 之间的高频低延迟数据通道

MessageChannel 能不能直接连两个独立 iframe

不能。浏览器禁止跨 iframe 直接传递 MessagePort 实例，哪怕同源——iframe-A.contentWindow 拿不到 iframe-B.contentWindow 的任何引用，更无法把 port2 作为对象传过去。你尝试 iframeB.contentWindow.postMessage(port, '*')，控制台立刻报 DataCloneError: An object could not be cloned。

所谓“两个独立 iframe 之间建立 MessageChannel”，本质是父页面充当信使：由父页创建 MessageChannel，再分别把 port1 发给 A、port2 发给 B（或反过来）。A 和 B 之间没有直连，但通信路径绕过了父页的 message 事件中转逻辑，实现了逻辑上的“直通”。

父页如何安全分发 port 到两个 iframe

关键不是“怎么发”，而是“发完之后谁负责激活”。父页只需确保两点：端口不复用、目标 origin 明确。

每个 iframe 对（A ↔ B）必须独占一个 MessageChannel 实例，不能让 A 和 C 共享同一对 port
发送时必须用 targetOrigin 精确指定接收方，例如 iframeA.contentWindow.postMessage({ type: 'port', port }, 'https://a.example.com')，禁用 '*'
务必在 postMessage 的第三个参数中传入 [port]，否则 port 不会被转移，接收方拿到的是空数组或 undefined

示例（父页）：

const channel = new MessageChannel();
iframeA.contentWindow.postMessage({ type: 'init', port: channel.port1 }, 'https://a.example.com', [channel.port1]);
iframeB.contentWindow.postMessage({ type: 'init', port: channel.port2 }, 'https://b.example.com', [channel.port2]);

iframe 内收到 port 后必须立即 start()

90% 的“收不到消息”问题都卡在这一步：port.onmessage 绑定了，但没调 port.start()。规范规定：未 start() 的 port 会静默丢弃所有消息，且不报错、不警告。

监听逻辑必须写在收到 port 的回调里，不能放在全局脚本顶部（此时 port 还没到）
推荐用 Promise 封装就绪流程，避免竞态：port.onmessage = () => { resolve(); port.start(); }
若 iframe 动态加载（如通过 srcdoc 或 JS 插入），需监听 load 事件后再发握手消息，否则 port 可能被丢弃

示例（iframe A）：

self.onmessage = function(e) {
  if (e.data.type === 'init' && e.ports?.length) {
    const port = e.ports[0];
    port.start(); // ⚠️ 必须这一行在前
    port.onmessage = e => console.log('A received:', e.data);
  }
};

高频场景下必须加节流和心跳

MessageChannel 降低的是序列化开销，不是主线程调度压力。连续调用 port.postMessage() 仍会压垮 event loop，尤其当接收方做 DOM 更新或计算时。

发送端用 requestIdleCallback 或 setTimeout(fn, 0) 控制最小间隔，避免突发洪峰
接收端对高频同类型消息（如坐标更新）启用“只取最新”策略：100ms 内超过 5 条，自动丢弃中间帧
必须加轻量心跳：A 每 500ms 向 B 发 { type: 'ping', ts: Date.now() }，B 收到后立即回 { type: 'pong', ts: Date.now(), replyTo: e.data.ts }；超时 200ms 未响应，A 主动 port.close() 并触发重连

真正容易被忽略的点：端口生命周期完全依赖 JS 执行上下文。iframe 被移除、reload、或 navigation 后，port 自动失效，但不会触发 onclose 事件——你得靠心跳超时来感知，而不是等异常抛出。