MessageChannel 提供同源环境下专用、双向、低开销的消息通道，通过一对 MessagePort 实现解耦通信；需调用 start() 启用监听，常用于主线程与 Worker 或 iframe 间通信，并可封装为 ChannelBridge 简化使用。
使用 MessageChannel 可在同源的两个独立执行上下文（如主线程与 Worker、iframe 之间、或不同 iframe 的内容脚本）间建立**专用、双向、低开销的消息通道**，天然适合解耦通信双方——发送方无需知道接收方是谁，只需向端口发消息；接收方只监听自己端口，不关心谁在另一端。
创建并分发端口对
MessageChannel 实例初始化时自动生成一对互连的 MessagePort 对象（port1 和 port2），二者构成单向数据链路，合起来即为双向通道。关键在于及时调用 start() 启用端口监听：
- 不调用
start()时，端口处于“关闭”状态，即使发消息也不会触发message事件 - 若通过
postMessage(..., [port])转移端口（例如传给 Worker 或 iframe），接收方需在收到message事件后立即调用event.ports[0].start() - 典型做法：一端保留一个端口用于接收，将另一个端口主动传递出去
在主线程与 Worker 间建立通信
这是最常见场景。主线程创建通道，把一个端口发给 Worker，双方各自监听自己持有的端口：
// 主线程
const channel = new MessageChannel();
const worker = new Worker('worker.js');
// 把 port2 发给 Worker
worker.postMessage({ type: 'INIT_PORT' }, [channel.port2]);
// 监听 port1（收到来自 Worker 的消息）
channel.port1.onmessage = (e) => {
console.log('主线程收到：', e.data);
};
channel.port1.start();
// Worker 内（worker.js）
self.onmessage = function(e) {
if (e.data.type === 'INIT_PORT') {
// 接收到被转移来的 port
const port = e.ports[0];
port.onmessage = (e) => {
console.log('Worker 收到：', e.data);
// 回复
port.postMessage({ reply: 'done' });
};
port.start(); // 必须调用！
}
};
在 iframe 间安全传递端口
跨 iframe 通信需确保同源，并借助 postMessage 转移端口。父页面可为子 iframe 创建专属通道，实现完全隔离的通信路径：
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 父页面创建
MessageChannel，将port2通过iframe.contentWindow.postMessage(..., [port2], targetOrigin)发送给子 iframe - 子 iframe 在
message事件中取出event.ports[0]并start()，之后即可与父页面双向通信 - 每个 iframe 可拥有独立端口对，避免消息混杂，天然支持多实例解耦
封装成可复用的通信桥接器
为避免重复处理端口生命周期，可封装一个轻量 ChannelBridge 类，统一管理端口启动、消息序列化、错误监听：
class ChannelBridge {
constructor(port) {
this.port = port;
this.port.start();
this.port.onmessageerror = (e) => console.error('通道消息解析失败', e);
}
send(data) {
this.port.postMessage(data);
}
onMessage(handler) {
this.port.onmessage = (e) => handler(e.data);
}
close() {
this.port.close();
}
}
// 使用示例（主线程）
const channel = new MessageChannel();
const bridge = new ChannelBridge(channel.port1);
bridge.onMessage(data => console.log('收到', data));
worker.postMessage(null, [channel.port2]);
这样，业务组件只需关注 send 和 onMessage，不感知底层端口细节，真正实现逻辑解耦与职责分离。
