vue3使用iframe postMessage

在Vue3中使用iframe的postMessage功能，可以通过以下步骤实现：

1. 首先，在Vue组件中获取到iframe的DOM元素。可以使用`document.querySelector`或者Vue的`ref`属性来获取。例如，使用`ref`属性获取到iframe元素的示例代码如下：

<template>
  <iframe ref="myIframe" src="http://example.com"></iframe>
</template>

<script>
export default {
  mounted() {
    const iframe = this.$refs.myIframe;
    // 在这里可以对iframe进行操作
  }
}
</script>

2. 接下来，监听iframe的`onload`事件，确保iframe已经加载完成。在事件处理程序中，可以使用`contentWindow.postMessage`方法向iframe发送消息。示例代码如下：

mounted() {
  const iframe = this.$refs.myIframe;
  iframe.onload = () => {
    console.log('iframe已加载');
    iframe.contentWindow.postMessage('hello world', '*');
  }
}

3. 在子页面中，可以使用`window.addEventListener`方法监听消息事件。通过判断消息的来源和数据类型，可以对接收到的消息进行处理。示例代码如下：

mounted() {
  window.addEventListener('message', (e) => {
    if (e.origin === 'http://example.com' && typeof e.data === 'string') {
      console.log('接收到来自iframe的数据', e.data);
      // 根据情况进行处理
    }
  }, false);
}

这样，你就可以在Vue3中使用iframe的postMessage功能了。通过监听事件和发送消息，可以实现Vue组件与iframe之间的通信。注意，在实际使用时，需要根据实际情况设置正确的来源和目标URL。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* [vue3 中iframe postmessage使用](https://blog.csdn.net/qq_46019581/article/details/127464930)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* *3* [vue中iframe的 postMessage message的使用,以及一些小疑问](https://blog.csdn.net/snows_l/article/details/131532067)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]