浏览器2个标签页面如何通信，传递数据

在Vue应用中，使用postMessage方法可以在两个不同的浏览器标签页之间进行通信。下面是一个简单的示例，展示如何在两个标签页之间发送和接收消息。

发送消息的标签页（Sender）

假设这是第一个标签页，我们将在这个标签页中发送消息到另一个标签页。

<!-- src/views/pageH/index.vue -->
<template>
  <div class='box'>
    <button @click="sendMessage">Send Message to Other Tab</button>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';

const sendMessage = () => {
  const otherWindow = window.open('', 'targetWindowName'); // 这里需要知道目标窗口的名称或引用
  if (otherWindow) {
    otherWindow.postMessage('Hello from Tab 1', '*'); // 发送消息到目标窗口
  } else {
    console.log('Target window not found');
  }
};
</script>

<style lang='scss' scoped></style>

接收消息的标签页（Receiver）

假设这是第二个标签页，我们将在这个标签页中接收来自第一个标签页的消息。

<!-- src/views/pageI/index.vue -->
<template>
  <div class='box'>
    <p>Received Message: {{ receivedMessage }}</p>
  </div>
</template>

<script lang='ts' setup>
import { ref, onMounted } from 'vue';

const receivedMessage = ref('');

onMounted(() => {
  window.addEventListener('message', (event) => {
    // 检查消息来源是否可信
    if (event.origin !== window.location.origin) return;

    receivedMessage.value = event.data; // 更新接收到的消息
    console.log('Received message:', event.data);
  });
});
</script>

<style lang='scss' scoped></style>

注意事项

1. 安全性：在使用postMessage时，确保检查消息的来源（event.origin），以防止跨站脚本攻击（XSS）。
2. 窗口引用：在发送消息时，需要有目标窗口的引用或名称。如果目标窗口是通过window.open打开的，可以保存这个引用。
3. 跨域限制：postMessage可以用于跨域通信，但需要确保目标窗口的origin与发送消息的窗口的origin匹配，或者使用'*'作为目标origin（不推荐用于生产环境）。

通过这种方式，你可以在两个不同的Vue组件或标签页之间实现通信。