实现多窗口高效数据传递，探索跨域通信的秘密

2022-12-03 16:06:51

打破跨域藩篱：实现跨域通信的三种有效途径

在现代网络开发中，跨域通信一直困扰着开发者，阻碍了不同来源页面之间的信息交流。但随着浏览器的不断革新，我们迎来了打破这一限制的利器，让跨域数据传递变得高效而便捷。

通过 URL 传递数据：简单直接的数据传输

你有没有遇到过这样的场景？ 需要在不同的页面之间传递少量数据，而且这些数据无需保密。这种情况下，通过 URL 传递数据不失为一种简单有效的解决方案。

如何操作？ 很简单，只需将数据作为查询字符串附加到 URL 中，然后在另一个页面中解析查询字符串即可获取数据。这种方式的好处是上手容易，代码简洁。

// 发送数据
window.location.href = "https://example.com/page2.html?data=hello";

// 接收数据
const urlParams = new URLSearchParams(window.location.search);
const data = urlParams.get("data");

postMessage()：跨页面安全数据传递

如果你需要在不同窗口或 iframe 之间传递数据，而且对数据安全有所顾虑，那么 postMessage()**方法绝对值得考虑。与通过 URL 传递数据不同，postMessage() 方法不会将数据暴露在 URL 中，从而增强了安全性。

如何实现？ 同样简单，使用 postMessage() 方法发送数据，并在目标页面中使用事件监听器接收数据。

// 发送数据
window.postMessage("hello", "https://example.com/page2.html");

// 接收数据
window.addEventListener("message", (event) => {
  if (event.origin === "https://example.com") {
    console.log(event.data);
  }
});

MessageChannel：不同域之间的可靠通信

当我们需要在两个不同域的页面之间建立稳固的通信通道时，MessageChannel API 应运而生。 它提供了一个专用的通道，比 postMessage() 方法更可靠且安全。

如何使用？ 首先，创建通信通道，然后使用通道端口发送和接收数据。

// 创建通信通道
const channel = new MessageChannel();

// 发送数据
channel.port1.postMessage("hello");

// 接收数据
channel.port2.addEventListener("message", (event) => {
  console.log(event.data);
});