1. postMessage 是什么？解决什么问题？
浏览器出于安全考虑有同源策略（scheme + host + port 完全一致才同源）。不同源页面之间默认不能直接读写彼此数据。
window.postMessage 提供一个安全的跨源通信通道，允许：
- 父页面 ↔ 子 iframe
- 页面 ↔ 新开弹窗（
window.open） - 同源多个标签页（也可用 BroadcastChannel）
- 页面 ↔ Service Worker（
client.postMessage） - 主线程 ↔ Web Worker（
worker.postMessage）
核心是消息传递：发送端调用
postMessage，接收端监听message事件。
2. 基本 API 与数据传输
2.1 发送端
targetWindow.postMessage(message, targetOrigin /* 必填！ */, transferOrOptions);
message：可被 structured clone 的数据（对象/数组/字符串/数值/布尔/ArrayBuffer/ImageBitmap/MessagePort/OffscreenCanvas 等）。targetOrigin：强烈建议指定确切源，如'https://example.com'。仅调试时可用"*"。transferOrOptions（可选）：可转移所有权的对象列表（如MessagePort、ArrayBuffer），或较新的 options 对象（兼容性以主流实现为准）。
2.2 接收端
window.addEventListener('message', (event) => { // event.data → 消息体 // event.origin → 发送方源（务必校验） // event.source → 发送方 window 引用（可回发） // event.ports → 携带的 MessagePort（如用 MessageChannel） });
2.3 结构化克隆（structured clone）
- 比
JSON.stringify更强：可传复杂对象 & 二进制（可选'转移所有权'零拷贝）。 - 不可传：函数、DOM 节点等。
3. 安全与健壮性要点（务必牢记）
- 永远校验
event.origin：只处理来自白名单源的消息。 - 不要使用
targetOrigin: "*"（除非完全公开且无敏感数据）。 - 永不信任消息内容：做 schema 校验 & XSS 过滤；严禁
eval。 - 生命周期管理：在不需要时移除事件监听，防内存泄漏。
- 超时与重试：请求 - 响应模式要有超时、重试与取消。
- 内容安全策略（CSP）：减少注入风险。
消息验签/版本/类型校验：设计统一数据格式：
interface Message<T = any> { v: '1.0'; // 协议版本 type: string; // 业务类型 id?: string; // 请求 - 响应关联 ID payload?: T; // 负载 error?: string; // 错误信息 }
4. 常见场景与代码
4.1 父页面 ↔ 子 iframe（跨源）
文件：parent.html（与 child.html 不同端口/域名即可模拟跨源）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Parent</title></head>
<body>
<h1>Parent</h1>
<iframe src="http://127.0.0.1:5501/child.html"></iframe>
<button>向子页面请求数据</button>
<pre></pre>
<script>
const child = document.getElementById('child');
const CHILD_ORIGIN = 'http://127.0.0.1:5501'; // 白名单子源
const log = (...a)=>document.getElementById('log').textContent += a.join(' ')+'\n';
// 请求 - 响应：用 id 关联，并带超时
const pending = new Map();
const = () => ( {
id = .().().();
pending.(id, {resolve, reject});
timer = ( { pending.(id); ( ()); }, timeout);
pending.(id). = timer;
child..({:, type, id, payload}, );
});
.(, {
(e. !== ) ;
{v, id, type, payload, error} = e. || {};
(v !== ) ;
(id && pending.(id)) {
{resolve, reject, timer} = pending.(id);
(timer);
pending.(id);
error ? ( (error)) : (payload);
}
(type === ) (, payload);
});
.(). = () => {
{
data = (, , );
(, data.);
} (err) {
(, err.);
}
};
文件：child.html
<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>Child</title></head>
<body>
<h3>Child iframe</h3>
<script>
const PARENT_ORIGIN = 'http://127.0.0.1:5500'; // 父页面源
// 启动时向父页面打个'招呼'（推送消息）
window.parent.postMessage({v:'1.0', type:'child:hello', payload:'child ready'}, PARENT_ORIGIN);
window.addEventListener('message', (e) => {
if (e.origin !== PARENT_ORIGIN) return; // 校验来源
const {v, id, type, payload} = e.data || {};
if (v !== '1.0') return;
if (type === 'parent:getTime') {
// 处理请求并响应
const resp = {:, id, :, : {: ().()}};
e..(resp, e.);
}
});
运行建议：开两个本地静态服务器（端口不同即不同源），如
5500放parent.html，5501放child.html。
4.2 页面 ↔ 弹窗（OAuth 登录/授权回调常用）
文件：main.html
<!DOCTYPE html>
<html>
<body>
<button>打开登录弹窗</button>
<pre></pre>
<script>
const AUTH_ORIGIN = 'https://auth.example.com'; // 假定第三方登录域
const out = (...a)=>document.getElementById('out').textContent += a.join(' ')+'\n';
document.getElementById('login').onclick = () => {
const win = window.open(AUTH_ORIGIN + '/login.html', 'auth', 'width=400,height=600');
const id = Math.random().toString(36).slice(2);
const timer = setInterval(() => {
if (win.closed) { clearInterval(timer); out('弹窗被关闭'); }
}, );
= () => {
(e. !== ) ;
{type, payload} = e. || {};
(type === ) {
(, payload.);
.(, onMsg);
win.();
}
(type === ) {
(, payload.);
.(, onMsg);
win.();
}
};
.(, onMsg);
};
文件：登录页（第三方域）login.html（示意）
<!DOCTYPE html>
<html>
<body>
<h3>模拟第三方登录</h3>
<button>同意并返回</button>
<button>失败</button>
<script>
// 注意：真实环境要把此处改为主站 origin
const PARENT = 'https://your-app.example.com';
document.getElementById('ok').onclick = () => {
window.opener.postMessage({type:'auth:success', payload:{token:'abc123'}}, PARENT);
};
document.getElementById('fail').onclick = () => {
window.opener.postMessage({type:'auth:error', payload:{reason:'user cancelled'}}, PARENT);
};
</script>
</body>
</html>
4.3 使用 MessageChannel 建立专用双工通道（更高效）
- 创建
MessageChannel，将port2通过一次postMessage发送给子页面。 - 之后双方用
port1/port2通道通信，避免全局message池子里的'串台'。
父页面：
const channel = new MessageChannel();
const {port1, port2} = channel;
const CHILD_ORIGIN = 'http://127.0.0.1:5501';
const iframe = document.querySelector('iframe');
port1.onmessage = (e) => {
console.log('来自子页 (专用通道)：', e.data);
};
// 把 port2 作为可转移对象发给子页面
iframe.contentWindow.postMessage({type:'init-port'}, CHILD_ORIGIN, [port2]);
// 之后用 port1 发消息
port1.postMessage({type:'ping', t: Date.now()});
子页面：
let port;
window.addEventListener('message', (e) => {
// 校验 origin 省略…
if (e.data?.type === 'init-port') {
port = e.ports[0];
port.onmessage = (me) => {
console.log('父页来的：', me.data);
port.postMessage({type:'pong', t: Date.now()});
};
}
});
优点：专线通信、更清晰、更易做请求 - 响应协议，也能避免误处理其它
postMessage。
4.4 主线程 ↔ Web Worker（计算/IO 解耦）
main.js
const worker = new Worker('./worker.js', {type: 'module'});
const call = (cmd, payload) => new Promise((resolve) => {
const id = Math.random().toString(36).slice(2);
const onMsg = (e) => {
if (e.data?.id === id) {
worker.removeEventListener('message', onMsg);
resolve(e.data.result);
}
};
worker.addEventListener('message', onMsg);
worker.postMessage({id, cmd, payload});
});
// 调用 call('sum', [1,2,3,4]).then(res => console.log('sum=', res));
worker.js
self.addEventListener('message', (e) => {
const {id, cmd, payload} = e.data || {};
if (cmd === 'sum') {
const result = payload.reduce((a,b)=>a+b,0);
self.postMessage({id, result});
}
});
Worker 的
postMessage同样基于结构化克隆，并支持转移ArrayBuffer进行零拷贝大数据传输（worker.postMessage(data, [data.buffer])）。
5. 可靠的请求 - 响应（Promise 封装）
在复杂业务里，经常需要像 RPC 一样'请求 → 等响应/错误'。下面给出可复用的小工具（父或子都能用）：
// rpc.js
export function createRPC(sendFn, onMessage) {
const pendings = new Map();
function request(type, payload, {timeout=5000}={}) {
const id = Math.random().toString(36).slice(2);
return new Promise((resolve, reject) => {
const timer = setTimeout(() => {
pendings.delete(id);
reject(new Error('timeout'));
}, timeout);
pendings.set(id, {resolve, reject, timer});
sendFn({v:'1.0', id, type, payload});
});
}
function handle(msg) {
const {v, id, type, payload, error} = msg || {};
if (v !== '1.0') return;
if (id && pendings.has(id)) {
const {resolve, reject, timer} = pendings.get(id);
clearTimeout(timer);
pendings.delete(id);
return error ? ( (error)) : (payload);
}
onMessage?.(msg);
}
{request, handle};
}
用法举例（父页使用全局 postMessage）：
import {createRPC} from './rpc.js';
const CHILD_ORIGIN = 'http://127.0.0.1:5501';
const childWin = document.querySelector('iframe').contentWindow;
const rpc = createRPC(
// sendFn
(msg) => childWin.postMessage(msg, CHILD_ORIGIN),
// onMessage（可选）
(push) => console.log('推送：', push)
);
window.addEventListener('message', (e) => {
if (e.origin !== CHILD_ORIGIN) return;
rpc.handle(e.data);
});
// 调用 rpc.request('getProfile', {uid: 123}).then(console.log).catch(console.error);
6. BroadcastChannel（同源多页群发）
同源多个标签页/iframe/worker 之间广播消息：
const bc = new BroadcastChannel('room-1');
bc.onmessage = (e) => console.log('收到：', e.data);
bc.postMessage({type:'notify', text:'hello everyone'});
仅同源可用；无需管理窗口引用，API 简洁。
7. 调试与常见坑
- 看不到消息？
targetOrigin不匹配；2) 接收方未监听或过早关闭；3) 被浏览器拦截的弹窗未创建成功。
- 多次触发/串台？
统一消息协议 + 指定type+ 使用 MessageChannel 专线。 - 性能问题？
批量发送合并/节流；大数据使用转移（ArrayBuffer）避免拷贝。 - Safari/移动端差异？
事件循环时序可能有差异，初始化连接（如发送 port）时机要在load之后更稳妥。
8. 何时用 postMessage，何时用别的？
- 多源页面通信 →
postMessage - 同源群聊 →
BroadcastChannel - 复杂、稳定的点对点通道 →
MessageChannel - 计算/IO 解耦 →
Web Worker - 页面 ↔ Service Worker →
postMessage（navigator.serviceWorker.controller.postMessage）
