1 postMessage 核心
postMessage 是现代浏览器提供的跨域通信标准 API，允许不同源的窗口（如主页面与 iframe、弹出窗口、Web Worker）安全交换数据。相比其他跨域方案，它的核心优势在于：
-
双向通信能力：支持消息的发送与接收，形成完整的通信闭环
-
安全可控性：通过
targetOrigin和event.origin严格校验消息源，防止恶意攻击 -
跨场景兼容性：适用于 iframe 嵌套、多标签页同步、Web Worker 等多种场景
-
数据灵活性：支持对象、数组、Blob 等复杂数据类型（基于结构化克隆算法）
1.1 核心 API
1.1.1 发送消息：安全传递数据到目标窗口
otherWindow.postMessage(message, targetOrigin);| 参数 | 描述 |
|---|---|
|
| 目标窗口引用，可通过以下方式获取： |
|
| 要发送的数据，支持 结构化克隆算法（可包含对象、数组、Blob 等，但需避免函数、DOM 节点）。 |
|
| 严格限制接收方的源（格式： |
示例：父窗口向 iframe 发送配置数据
// 父窗口代码
const iframe = document.getElementById('myIframe');
iframe.contentWindow.postMessage({ type: 'init', config: { theme: 'dark' } },'https://child-domain.com' // 严格指定iframe的域名
);1.1.2 接收消息：监听并处理跨域数据
window.addEventListener('message', (event) => {const { data, origin, source } = event;// 1. 校验消息来源（安全关键）if (origin !== 'https://trusted.com') {console.warn('未知来源的消息:', origin);return;}// 2. 处理消息数据（根据约定的格式）switch (data.type) {case 'login':console.log('用户登录信息:', data.user);break;case 'logout':// 执行登出逻辑break;}// 3. 可选：回复消息（通过source窗口）source.postMessage({ status: 'received' }, origin);
});| 属性 | 描述 |
|---|---|
event.data | 发送方传递的数据（类型与发送时一致）。 |
event.origin | 发送方的源（如 https://sender.com），用于安全校验。 |
event.source | 发送方的窗口引用，可用于回复消息（调用 source.postMessage()）。 |
2 实战案例
2.1 服务端A（servera.js）
// 引入Express框架，这是一个基于Node.js的快速、灵活的Web应用框架
const express = require('express');
// 创建一个Express应用实例，用于处理HTTP请求和响应
const app = express();
// 配置Express应用使用静态文件中间件，指定从'public'文件夹中提供静态资源（如HTML、CSS、图片等）
app.use(express.static('public'));
// 定义应用监听的端口号，3000是前端开发中常用的非特权端口
const port = 3000;
// 启动服务器并监听指定端口，当服务器成功启动后执行回调函数
app.listen(port, () => {// 在控制台输出服务器运行的地址信息，方便开发者确认服务启动状态console.log(`Server is running on http://localhost:${port}`);
});2.2 静态页面A（a.html）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>a</title>
</head>
<body><!-- 插入id为"b-iframe"的iframe元素，指向http://localhost:4000/b.htmlonload事件在iframe资源加载完成后触发handleIframeLoad函数 --><iframe id="b-iframe" src="http://localhost:4000/b.html" onload="handleIframeLoad()"></iframe><script>// 定义目标源，与iframe的源保持一致，用于postMessage安全校验const targetOrigin = 'http://localhost:4000';// iframe加载完成后的处理函数function handleIframeLoad() {// 通过contentWindow获取iframe的window对象，用于跨窗口通信let bWindow = document.getElementById('b-iframe').contentWindow;// 向iframe发送消息，第二个参数指定目标源防止恶意窗口接收bWindow.postMessage('hello', targetOrigin);}// 监听当前窗口的message事件，接收来自其他窗口的跨域消息window.addEventListener('message', function(event) {// 输出接收到的消息内容（包含event.data、event.origin等安全信息）console.log('Received message: ', event.data);}, false);</script>
</body>
</html>2.3 服务端B（serverb.js）
// 引入Express框架（基于Node.js的Web应用开发框架，提供路由、中间件等功能）
const express = require('express');
// 创建Express应用实例（核心对象，用于处理HTTP请求和响应）
const app = express();
// 配置静态资源中间件（指定从'public'文件夹中读取HTML、CSS、图片等静态文件）
app.use(express.static('public'));
// 定义服务器监听的端口号（4000为自定义端口，需确保未被其他服务占用）
const port = 4000;
// 启动服务器并绑定端口（回调函数在服务启动成功后执行）
app.listen(port, () => {// 控制台输出服务运行地址（便于开发者确认服务状态和访问路径）console.log(`Server is running on http://localhost:${port}`);
});2.4 静态页面B（b.html）
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>b</title>
</head>
<body><script>// 监听当前窗口的message事件，用于接收其他窗口发送的跨域消息window.addEventListener('message', function(event) {// 输出消息发送方的window对象（可用于回复消息）console.log(event.source); // Window // 输出消息发送方的源（协议+域名+端口），用于安全校验console.log(event.origin); // http://localhost:3000// 向消息发送方返回响应消息，第二个参数指定目标源为发送方的源event.source.postMessage('world', event.origin);}, false);</script>
</body>
</html>3 适用场景
| 场景类型 | 典型应用案例 |
|---|---|
| 微前端架构 | 主应用与子应用通过 iframe 嵌套，使用 postMessage 传递路由、状态等信息 |
| 多标签页同步 | 电商网站中，用户在 A 标签页添加商品，B 标签页实时更新购物车数量 |
| Web Worker 通信 | 主线程与 Web Worker 通过 postMessage 交换计算任务和结果 |
| 跨域文件操作 | 本地文件选择器页面与主应用通过 postMessage 传递 File 对象 |
postMessage 作为浏览器原生跨域方案，通过 “消息订阅 - 发布” 模式实现了安全可控的跨窗口通信。在实际应用中，结合 Web Worker、Service Worker 等技术，可构建更复杂的跨域应用架构。如需处理高频实时通信（如在线协作、游戏），可结合 WebSocket 方案；对于服务端跨域需求，CORS 与代理服务器仍是主流选择。
通过合理设计消息协议与安全策略，postMessage 能在保证用户数据安全的前提下，高效解决前端开发中的跨域通信难题。
下一章将介绍 websocket 方案 ，敬请期待！
)
![java设计模式[3]之结构型模式](http://pic.xiahunao.cn/java设计模式[3]之结构型模式)
