微前端传值

每天吃饭的羊

于 2024-08-20 13:54:12 发布

阅读量89

点赞数 2

分类专栏： # 第一次见你文章标签：前端

本文链接：https://blog.csdn.net/m0_47999208/article/details/141356551

版权

第一次见你专栏收录该内容

52 篇文章 0 订阅

订阅专栏

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