跨页面通信利器：postMessage使用指南

跨页面通信利器：postMessage使用指南

window.postMessage - Web API | MDN

一、通信原理

postMessageAPI 允许不同窗口/iframe 间安全地进行跨域通信，基于消息事件机制实现数据传递。其核心优势在于：

• 支持跨域通信
• 采用异步消息机制
• 严格的安全验证机制

二、基础语法

// 发送消息 targetWindow.postMessage(message, targetOrigin, [transfer]); // 接收消息 window.addEventListener('message', (event) => { // 处理消息 });

参数说明：

• targetWindow：目标窗口的引用
• message：支持字符串/对象等结构化数据
• targetOrigin：指定接收方 origin（*表示任意）

三、实战案例

案例1：同源窗口通信

<!-- 父页面 parent.html --> <button onclick="openChild()">打开子窗口</button> <script> let childWindow; function openChild() { childWindow = window.open('child.html'); // 发送消息 setTimeout(() => { childWindow.postMessage({ type: 'greeting', data: 'Hello from parent' }, '*'); }, 1000); } // 监听消息 window.addEventListener('message', (e) => { if (e.data.type === 'response') { console.log('收到响应:', e.data.content); } }); </script> <!-- 子页面 child.html --> <script> window.addEventListener('message', (e) => { if (e.data.type === 'greeting') { console.log('收到问候:', e.data.data); // 回复父窗口 e.source.postMessage({ type: 'response', content: 'Message received at: ' + Date.now() }, '*'); } }); </script>

案例2：跨域iframe通信

<!-- 主页面 https://a.com --> <iframe src="https://b.com/iframe.html"></iframe> <script> const iframe = document.querySelector('iframe'); iframe.onload = () => { // 发送认证请求 iframe.contentWindow.postMessage( { authToken: 'SECRET_KEY' }, 'https://b.com' ); }; window.addEventListener('message', (e) => { // 严格验证来源 if (e.origin !== 'https://b.com') return; if (e.data.status === 'authenticated') { console.log('认证成功'); } }); </script> <!-- iframe页面 https://b.com/iframe.html --> <script> window.addEventListener('message', (e) => { // 验证来源域名 if (e.origin !== 'https://a.com') return; if (e.data.authToken === 'SECRET_KEY') { // 发送认证响应 e.source.postMessage( { status: 'authenticated' }, 'https://a.com' ); } }); </script>

四、安全实践

1. 严格验证来源：

window.addEventListener('message', (e) => { if (e.origin !== 'https://trusted-domain.com') return; // 处理消息... });

2. 数据校验：

function handleMessage(event) { if (typeof event.data !== 'object') return; if (!event.data.hasOwnProperty('type')) return; // 根据类型处理不同消息 switch(event.data.type) { case 'UPDATE_STATE': // 处理状态更新 break; case 'API_REQUEST': // 处理API请求 break; } }

3. 及时移除监听器：

function temporaryListener() { const handler = (e) => { // 处理逻辑... window.removeEventListener('message', handler); }; window.addEventListener('message', handler); }

五、注意事项

1. 敏感数据应加密传输
2. 避免传输函数等不可序列化对象
3. 使用try-catch处理异常：

try { targetWindow.postMessage(bigData, targetOrigin); } catch (e) { console.error('消息发送失败:', e); }

六、适用场景

• 跨域单点登录
• 多窗口状态同步
• 第三方组件通信
• 微前端架构
• 跨应用数据共享

通过合理使用 postMessage，开发者可以构建安全可靠的跨页面通信系统。建议结合具体业务需求设计消息协议，并做好错误处理与日志记录。