在微前端架构中,不同子应用之间通过 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>