MessageChannel 可实现两个同源 iframe 无需父页面中转的直接通信：父页创建 channel 并在 iframe 加载后通过 postMessage + transfer 分发 port；子页监听 message 事件获取 port 并调用 start() 和 onmessage；双方持对方 port 即可双向 postMessage 通信，需注意同源限制、port 生命周期及防 GC。
MessageChannel 可以让两个独立的 iframe 实现**无需父页面中转**的直接通信，关键在于父页面创建 channel 并将 port 分别传递给两个 iframe，之后它们就能通过各自的 port 直接收发消息。
1. 父页面：创建 channel 并分发 port
父页面不参与消息内容处理，只负责初始化通信通道。需注意：必须在 iframe 加载完成（load 事件后）再发送 port，否则子页面可能尚未准备好接收。
- 用
new MessageChannel()创建通道，得到port1和port2 - 通过
postMessage将其中一个 port 发给 iframe A，另一个发给 iframe B - 发送时需在
transfer参数中显式传入 port，否则只会传拷贝而非可通信的 port
const channel = new MessageChannel();
const iframeA = document.getElementById('iframe-a');
const iframeB = document.getElementById('iframe-b');
iframeA.addEventListener('load', () => {
iframeA.contentWindow.postMessage({ type: 'INIT_PORT', port: channel.port1 }, '*', [channel.port1]);
});
iframeB.addEventListener('load', () => {
iframeB.contentWindow.postMessage({ type: 'INIT_PORT', port: channel.port2 }, '*', [channel.port2]);
});
2. 子 iframe：接收 port 并建立监听
每个 iframe 收到 port 后，应立即调用 port.start() 启动消息队列，并设置 port.onmessage 处理来信。注意：不能用 window.addEventListener('message') 接收 port 消息，因为 port 消息是定向的、不经过全局 message 事件。
anything-to-html
下载
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- 检查
event.ports是否存在且长度为 1，确认收到的是 MessagePort - 保存 port 引用，避免被垃圾回收（port 被 GC 后通信即中断）
- 调用
port.start()是必需步骤，否则不会触发 onmessage
window.addEventListener('message', (e) => {
if (e.data.type === 'INIT_PORT' && e.ports?.length === 1) {
const remotePort = e.ports[0];
remotePort.start(); // 必须调用
remotePort.onmessage = (msgEvent) => {
console.log('[A 收到]', msgEvent.data);
};
// 保存引用（如挂到 window 或闭包变量）
window.remotePort = remotePort;
}
});
3. 双向通信：直接调用 postMessage
一旦双方都持有对方的 port，即可绕过父页面，直接互发消息。消息内容可以是任意结构化克隆对象（包括 ArrayBuffer、JSON 等），但不能含函数或 DOM 节点。
立即学习“前端免费学习笔记（深入）”；
- 发送方调用
port.postMessage(data, [transferList]) - 若需传输 ArrayBuffer 等可转移对象，必须写入
transfer数组，否则会拷贝 - 不需要指定目标 origin，port 是点对点的，天然安全
// 假设 window.remotePort 已就绪
window.remotePort.postMessage({ action: 'UPDATE_DATA', payload: [1, 2, 3] });
4. 注意事项与常见问题
这种通信方式轻量高效，但也容易因细节疏忽而失败。
- iframe 必须同源（协议、域名、端口一致），跨域下 port 无法传递（postMessage 会报错）
- port 一旦关闭（
port.close()）或页面卸载，通信即终止，不可恢复 - 若某 iframe 重载，其持有的 port 失效，另一方继续 postMessage 会静默失败（无异常，但对方收不到）
- 建议在通信前加简单握手（如交换 id 或版本），便于调试和容错
