当前位置：首页 > VUE

Vue实现postMessage

2026-03-06 22:51:12VUE

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

在 Vue 中使用 postMessage 可以实现跨窗口或跨域的通信。postMessage 是 HTML5 提供的 API，允许不同窗口或 iframe 之间安全地传递数据。

发送消息

在发送消息的 Vue 组件中，调用 window.postMessage 方法。确保目标窗口的引用正确（如 iframe 的 contentWindow 或通过 window.open 打开的窗口）。

// 发送消息的 Vue 组件
export default {
  methods: {
    sendMessage() {
      const targetWindow = document.getElementById('iframe').contentWindow;
      const message = { key: 'value' };
      targetWindow.postMessage(message, '*'); // 第二个参数指定目标域，'*' 表示不限制
    }
  }
}

接收消息

在接收消息的 Vue 组件中，监听 window 的 message 事件。通过事件对象的 data 属性获取传递的数据。

// 接收消息的 Vue 组件
export default {
  mounted() {
    window.addEventListener('message', this.handleMessage);
  },
  beforeDestroy() {
    window.removeEventListener('message', this.handleMessage);
  },
  methods: {
    handleMessage(event) {
      if (event.origin !== 'https://expected-origin.com') return; // 验证来源
      console.log('Received message:', event.data);
    }
  }
}

安全注意事项

验证来源：始终检查 event.origin 或 event.source，确保消息来自可信的窗口或域。
限制目标域：发送消息时，尽量指定具体的目标域（如 https://target-domain.com），避免使用 '*'。
清理监听器：在组件销毁时移除事件监听，避免内存泄漏。

跨域通信示例

如果通信双方是不同域的页面，postMessage 是实现跨域通信的安全方式。确保双方都正确实现了消息的发送和接收逻辑。

Vue实现postMessage

// 父页面发送消息给 iframe
const iframe = document.getElementById('iframe').contentWindow;
iframe.postMessage({ type: 'greeting', text: 'Hello iframe!' }, 'https://iframe-domain.com');

// iframe 接收消息
window.addEventListener('message', (event) => {
  if (event.origin !== 'https://parent-domain.com') return;
  console.log('Parent says:', event.data.text);
});

通过以上方法，可以在 Vue 中高效安全地使用 postMessage 实现跨窗口或跨域通信。