MessagePort 本身不直接调用 Worker，而是通过 MessageChannel 创建双向通道使 Worker 充当跨文档通信枢纽；需主线程或 iframe 发送 port 给 Worker 并调用 start()，Worker 再转发消息实现跨 iframe 调用，SharedWorker 必须同源且需妥善管理 port 生命周期。
HTML5 中的 MessagePort 确实可以实现跨文档环境（如 iframe、window、Worker）之间的双向、低延迟通信，但它**本身不直接“调用” Worker**，而是为 Worker 与其它上下文（包括不同源的 iframe 或同源的其他 window）提供安全、独立的通信通道。真正实现“跨文档调用 Worker”的关键是：将 Worker 作为中间通信枢纽，并通过 MessagePort 建立多端连接。
核心机制：Worker 暴露 MessagePort 实例
Worker 不能被“远程调用”（如像 RPC 那样执行函数），但可通过 postMessage() + MessagePort 实现能力委托。关键在于：
- 主线程（或 iframe）创建
MessageChannel，获取一对关联的MessagePort； - 将其中一个 port 通过
postMessage(port, [port])发送给 Worker； - Worker 接收后调用
port.start()，即可与该端建立双向通道； - 此后，Worker 和发起方（即使来自不同 iframe）可互相
postMessage()，无需依赖全局作用域。
跨 iframe + Worker 的典型流程
假设页面嵌入两个同源 iframe（A 和 B），希望它们共用一个 Worker 并互发消息：
- 主页面初始化一个
Worker（例如shared-worker.js）； - iframe A 创建
MessageChannel，将port1发给 Worker：worker.postMessage({type: 'register', port: port1}, [port1])； - Worker 收到后保存
port1，并port1.start()； - iframe B 同样注册，Worker 保存
port2； - 当 iframe A 发送
{to: 'B', data: 'hello'}，Worker 解析后转发到port2—— 实现跨 iframe 调用效果。
注意同源与跨源限制
MessagePort 本身支持跨源传递（如通过 iframe.contentWindow.postMessage() 传 port），但前提是：
- 接收方（如 iframe）必须监听
message事件并显式调用event.ports[0].start()； - 跨源 iframe 无法直接访问对方 DOM，但可通过 port 安全交换结构化数据；
- Worker 必须是
SharedWorker（而非Worker）才能被多个文档实例共享；SharedWorker也要求同源（协议+域名+端口一致）。
实际编码要点
避免常见陷阱：
- 务必在使用 port 前调用
.start()，否则消息会进入队列不触发message事件； - port 是一次性资源：关闭后不可重用，需重新协商；
- Worker 中若需响应多个客户端，建议用 Map 存储 port 并绑定唯一 ID（如用
crypto.randomUUID()）； - 错误处理要监听
port.onmessageerror，防止序列化失败静默丢包。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
