微前端传值

在微前端架构中，不同子应用之间通过 postMessage 进行通信是一种常见的做法。这种方式允许不同源的窗口之间进行安全的信息交换。

下面是如何使用 postMessage 在微前端环境中发送和接收消息的示例。

步骤 1: 发送消息

假设您有一个主应用（host app）和一个子应用（micro app）。子应用需要向主应用发送消息。

子应用代码示例：

// 子应用的 JavaScript 文件
function sendMessageToHostApp(message) {const hostWindow = window.parent; // 获取父窗口if (hostWindow && hostWindow.postMessage) {hostWindow.postMessage(message, '*'); // 发送到任何源}
}// 示例调用
sendMessageToHostApp({ type: 'GREETING', content: 'Hello from micro app!' });

步骤 2: 接收消息

接下来，您需要在主应用中监听 message 事件，以便能够接收到来自子应用的消息。

主应用代码示例：

// 主应用的 JavaScript 文件
window.addEventListener('message', function(event) {console.log('Received message:', event.data);// 检查消息来源是否可信if (event.origin !== 'http://your-sub-app-origin.com') {return;}// 处理消息switch (event.data.type) {case 'GREETING':console.log('Greeting received:', event.data.content);break;default:console.log('Unknown message type:', event.data.type);}
}, false);

注意事项：

消息来源验证:
- 在接收到消息时，最好检查 event.origin 以确保消息来自预期的子应用。
- 如果您的子应用部署在与主应用不同的域名上，您需要确保允许正确的源。
消息格式:
- 使用结构化的消息格式（如 JSON 对象），以便于解析和处理。
错误处理:
- 当发送或接收消息时，应考虑异常情况并进行适当的错误处理。
通信安全:
- 在生产环境中，确保只信任来自安全源的消息。

示例完整代码

子应用（Micro App）

<!-- micro-app.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Micro App</title>
</head>
<body><h1>Micro App</h1><button onclick="sendMessage()">Send Message</button><script>function sendMessage() {const message = { type: 'GREETING', content: 'Hello from micro app!' };const hostWindow = window.parent;if (hostWindow && hostWindow.postMessage) {hostWindow.postMessage(message, '*'); // 发送到任何源}}</script>
</body>
</html>

主应用（Host App）

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Host App</title>
</head>
<body><h1>Host App</h1><iframe src="http://your-sub-app-origin.com/micro-app.html" width="300" height="200"></iframe><script>window.addEventListener('message', function(event) {console.log('Received message:', event.data);// 检查消息来源是否可信if (event.origin !== 'http://your-sub-app-origin.com') {return;}// 处理消息switch (event.data.type) {case 'GREETING':console.log('Greeting received:', event.data.content);break;default:console.log('Unknown message type:', event.data.type);}}, false);</script>
</body>
</html>