30分钟简单实现postMessage的Promise业务场景

2024-02-14 08:22:52

前言

在Web开发中，我们经常会遇到需要在不同窗口或iframe之间进行通信的情况。postMessage是一种常用的跨域通信方法，它允许不同窗口或iframe之间发送和接收消息。然而，postMessage本身并不支持Promise，这给开发人员带来了不便。本文将介绍如何通过postMessage实现Promise业务场景，帮助开发者们构建更加灵活、可靠的跨域通信解决方案。

实现步骤

1. 创建两个HTML文件

创建一个名为"parent.html"的HTML文件，另一个名为"child.html"的HTML文件。

2. 在parent.html中创建iframe

在"parent.html"中，使用iframe元素嵌入"child.html"。

<iframe src="child.html"></iframe>

3. 在child.html中添加postMessage事件监听器

在"child.html"中，添加一个postMessage事件监听器，以便能够接收来自父窗口的消息。

window.addEventListener("message", function(event) {
  console.log(event.data);
});

4. 在parent.html中使用postMessage发送消息

在"parent.html"中，使用postMessage方法向iframe发送消息。

document.querySelector("iframe").contentWindow.postMessage("Hello from parent!", "*");

5. 在child.html中使用Promise处理接收到的消息

在"child.html"中，使用Promise处理接收到的消息。

window.addEventListener("message", function(event) {
  return new Promise(function(resolve, reject) {
    if (event.data === "Hello from parent!") {
      resolve("Hello from child!");
    } else {
      reject("Error: Invalid message received!");
    }
  });
});

6. 在parent.html中使用async/await处理Promise

在"parent.html"中，使用async/await处理Promise。

async function communicateWithChild() {
  try {
    const response = await document.querySelector("iframe").contentWindow.postMessage("Hello from parent!", "*");
    console.log(response);
  } catch (error) {
    console.error(error);
  }
}

communicateWithChild();