当前位置：首页 > VUE

Vue实现postMessage

2026-02-09 23:01:28VUE

Vue 中使用 postMessage 实现跨窗口通信

postMessage 是 HTML5 提供的 API，允许不同窗口或 iframe 之间安全地跨域通信。在 Vue 中可以通过以下方式实现。

发送消息

在发送方组件中，使用 window.postMessage 方法向目标窗口发送消息。目标窗口可以是 iframe、新打开的窗口或父窗口。

// 发送消息到目标窗口
const targetWindow = window.open('https://target-url.com'); // 或 iframe.contentWindow
targetWindow.postMessage(
  { type: 'customEvent', data: 'Hello from Vue' },
  'https://target-url.com' // 目标源，确保安全
);

接收消息

在接收方组件中，监听 message 事件并处理传入的消息。通常在 Vue 的 mounted 钩子中设置监听器。

Vue实现postMessage

export default {
  mounted() {
    window.addEventListener('message', this.handleMessage);
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      // 验证来源以确保安全
      if (event.origin !== 'https://sender-url.com') return;

      const { type, data } = event.data;
      if (type === 'customEvent') {
        console.log('Received:', data);
      }
    }
  }
}

安全注意事项

验证 event.origin：始终检查消息来源，防止恶意攻击。
指定目标源：发送消息时明确目标窗口的源，避免数据泄露。
移除监听器：组件销毁时移除事件监听，避免内存泄漏。

完整示例

父窗口（发送消息）

<template>
  <button @click="sendMessage">Send Message</button>
  <iframe ref="iframe" src="https://child-url.com"></iframe>
</template>

<script>
export default {
  methods: {
    sendMessage() {
      this.$refs.iframe.contentWindow.postMessage(
        { type: 'greet', data: 'Hello from parent' },
        'https://child-url.com'
      );
    }
  }
}
</script>

子窗口（接收消息）

<template>
  <div>{{ receivedMessage }}</div>
</template>

<script>
export default {
  data() {
    return {
      receivedMessage: ''
    };
  },
  mounted() {
    window.addEventListener('message', this.handleMessage);
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      if (event.origin !== 'https://parent-url.com') return;
      if (event.data.type === 'greet') {
        this.receivedMessage = event.data.data;
      }
    }
  }
}
</script>

通过以上方式，可以在 Vue 中安全地实现跨窗口通信。