什么是跨页面通信

在浏览器中，我们可以同时打开多个Tab页，每个Tab页可以粗略理解为一个“独立”的运行环境，即使是全局对象也不会在多个Tab间共享。然而有些时候，我们希望能在这些“独立”的Tab页面之间同步页面的数据、信息或状态。

跨页面通信，有哪些方法

前端跨页面通信是指在不同的浏览器标签页、窗口或框架之间进行通信。有多种方法可以实现跨页面通信，具体选择方法取决于需求和兼容性要求。以下是一些常见的前端跨页面通信方法：

「Broadcast Channel：」 使用 Broadcast Channel API，可以在同一浏览器中的不同页面之间实现实时通信。
「Window.postMessage()：」 Window.postMessage() 方法允许您在不同窗口之间安全地发送消息。这个方法通过发送消息事件来触发消息接收，可以在不同域之间使用，只要目标窗口同意。

// 发送消息
window.postMessage('Hello from Page 1!', 'https://example.com');

// 接收消息
window.addEventListener('message', event => {
 console.log(event.data);
});

「LocalStorage 或 SessionStorage：」 您可以使用 localStorage 或 sessionStorage 存储数据，以便在不同页面之间共享信息。这种方式适用于需要持久性数据的情况，但只能存储字符串数据。
「Cookies：」 使用浏览器的 cookies 来在不同页面之间传递信息。这种方法适用于存储小量数据，但可能会受到一些安全和隐私限制。
「Web Sockets：」 使用 WebSocket 协议可以实现实时双向通信，适用于需要高度实时性的应用程序。WebSocket 允许不同页面之间建立持久性连接，以进行双向通信。
「Shared Workers：」 Shared Workers 是一种多个页面之间共享的 Web Worker，它可以在不同页面之间进行消息传递。这适用于高性能计算和共享数据的场景。
「服务端通信：」 如果需要在不同页面之间共享数据，可以通过与服务器进行通信，将数据存储在服务器上，然后在不同页面中从服务器获取数据。
「跨文档通信库：」 有一些开源 JavaScript 库和框架，如 localForage、postis、easyXDM 等，专门用于处理跨页面通信问题。这些库提供了更高级的抽象和易用性，使通信更容易管理。

Broadcast Channel 是什么

Broadcast Channel 是一个Web API，用于在同一浏览器的不同窗口、标签页或框架之间进行实时通信。它是HTML Living Standard的一部分，被浏览器原生支持，用于实现跨文档通信。

以下是关于Broadcast Channel的主要特点和用途：

「跨文档通信：」 Broadcast Channel 允许不同浏览器上下文之间进行通信。这包括不同标签页、不同窗口、不同的iframe或甚至在同一标签页中的不同JavaScript上下文。
「发布-订阅模式：」 Broadcast Channel 遵循发布-订阅（Pub-Sub）模式。一个文档（或上下文）可以充当消息的发布者，而其他文档可以订阅这些消息。当发布者发送消息时，所有订阅相同频道的文档都会接收消息。
「频道：」 每个 Broadcast Channel 都有一个唯一的名称或频道标识符，这个频道用于将消息传递给订阅了相同频道的文档。不同频道的消息是隔离的，不同频道的文档不会相互干扰。
「安全性：」 Broadcast Channel 受同源策略的限制，这意味着只有在同一个域下的不同文档之间才能进行通信。这有助于确保通信的安全性。
「消息传递：」 您可以使用 postMessage() 方法来发送消息到广播通道，然后在其他文档中使用事件监听器来接收这些消息。消息可以是任何可序列化的数据类型，如字符串、对象等。

下面是一个简单的示例，演示如何在不同标签页之间使用 Broadcast Channel 进行通信：

// 在标签页1中
const channel = new BroadcastChannel('myChannel');
channel.postMessage('Hello from Page 1!');

// 在标签页2中
const channel = new BroadcastChannel('myChannel');
channel.addEventListener('message', event => {
  console.log(event.data); // 输出 "Hello from Page 1!"
});

基于vue3 使用Broadcast Channel封装跨页面通信组件

创建一个 BroadcastChannelCommunication 组件，它将负责管理 Broadcast Channel 广播和订阅消息的逻辑。

组件文件 BroadcastChannelCommunication.vue：

<template>
  <div>
    <h1>Cross-Page Communication</h1>
    <div>
      <input v-model="message" @input="sendMessage" />
    </div>
    <div>
      <h2>Received Messages:</h2>
      <ul>
        <li v-for="(message, index) in receivedMessages" :key="index">{{ message }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: "",
      receivedMessages: [],
      channel: null,
    };
  },
  created() {
    this.channel = new BroadcastChannel("myChannel");
    this.channel.addEventListener("message", (event) => {
      this.receivedMessages.push(event.data);
    });
  },
  beforeUnmount() {
    this.channel.close();
  },
  methods: {
    sendMessage() {
      this.channel.postMessage(this.message);
      this.message = "";
    },
  },
};
</script>

在这个组件中，我们创建了一个 BroadcastChannel 实例，使用了一个名为 “myChannel” 的频道名称。通过输入框，您可以输入消息并发送它。接收到的消息会显示在页面上。

接下来，在您的 Vue 3 应用中，您可以使用这个组件，确保将其正确注册并添加到您的应用中。例如，在您的 main.js 文件中：

import { createApp } from "vue";
import App from "./App.vue";
import BroadcastChannelCommunication from "./BroadcastChannelCommunication.vue";

const app = createApp(App);

app.component("BroadcastChannelCommunication", BroadcastChannelCommunication);

app.mount("#app");