打破iframe藩篱，postMessage实现跨域数据传输

2024-02-18 12:08:30

在前端开发的广阔天地中，跨域通信是一道绕不开的难题。当我们面临来自不同域名的资源交互时，传统的XMLHttpRequest就显得力不从心了。于是，postMessage异军突起，成为破解跨域困局的一剂良方。

postMessage是一种由HTML5引入的跨文档通信机制，它允许不同来源的窗口或iframe之间交换消息。其工作原理非常简单，就是通过window.postMessage()方法将数据发送到目标窗口，并通过window.addEventListener("message")事件监听器接收消息。

postMessage的出现为跨域通信带来了极大的便利性，它可以用于以下场景：

iframe与主页面之间的通信
不同浏览器窗口之间的通信
Web Worker与主线程之间的通信

postMessage实现跨域数据传输步骤

使用postMessage实现跨域数据传输非常简单，只需要遵循以下步骤：

建立通信通道 ：在需要通信的窗口或iframe中，使用window.postMessage()方法建立通信通道。
发送消息 ：在发送方窗口或iframe中，使用window.postMessage()方法发送消息。
接收消息 ：在接收方窗口或iframe中，使用window.addEventListener("message")事件监听器接收消息。

postMessage数据传输实例

// 发送方
const targetOrigin = 'http://example.com'; // 目标窗口或iframe的来源
window.postMessage({message: 'Hello from sender'}, targetOrigin);

// 接收方
window.addEventListener("message", (event) => {
  if (event.origin === targetOrigin) { // 检查消息来源
    console.log(event.data.message); // 输出接收到的消息
  }
});