window.postMessage()两个弹窗返回值 使用回调函数解决办法

当使用 `window.postMessage()` 向同一窗口发送多个消息时，您可以使用回调函数来处理返回值。以下是一种可能的解决方案：

1. 在发送消息时，为每个消息分配一个唯一的标识符，并将该标识符作为消息的一部分发送。

2. 在接收到响应消息时，检查消息的标识符，并将响应值与标识符相关联。

3. 当您需要使用返回值时，您可以通过标识符获取响应值。

4. 在发送消息时，除了消息本身之外，还可以指定一个回调函数。当接收到响应消息时，调用回调函数，并将响应值作为参数传递。

以下是一个示例代码：

// 定义一个计数器，用于为每个消息分配唯一的标识符
let messageId = 0;

// 定义一个对象，用于存储每个消息的响应值
const responseMap = {};

// 定义一个函数，用于发送消息并指定回调函数
function sendMessageWithCallback(message, callback) {
  // 为消息分配唯一的标识符
  const id = ++messageId;
  
  // 将标识符作为消息的一部分发送
  const data = { id, message };
  window.postMessage(data, '*');
  
  // 将回调函数与标识符相关联
  responseMap[id] = callback;
}

// 在窗口接收到消息时，检查消息的标识符，并调用相关的回调函数
window.addEventListener('message', event => {
  const { id, message } = event.data;
  
  // 如果消息有标识符，则调用相关的回调函数
  if (id != null && responseMap[id]) {
    const callback = responseMap[id];
    delete responseMap[id];
    callback(message);
  }
});

使用上述代码，您可以通过以下方式发送消息并指定回调函数：

sendMessageWithCallback('hello', response => {
  console.log(response);
});

当接收到响应消息时，代码将自动调用回调函数，并将响应值作为参数传递给它。