vue页面内嵌iframe使用postMessage进行数据交互（postMessage跨域通信）

// 父页面中的Vue组件部分
<template>
  <div>
    <iframe
      :src="iframeUrl"
      @load="iframeLoaded"
    ></iframe>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      iframeUrl: 'https://your-iframe-content-url.com',
    };
  },
  methods: {
    iframeLoaded(event) {
      // 当iframe加载完成后向其发送消息
      const iframeWindow = event.target.contentWindow;
      iframeWindow.postMessage('Hello from the parent', '*');
    }
  }
};
</script>
 
// iframe页面中的JavaScript部分
window.addEventListener('message', function(event) {
  if (event.origin !== 'https://your-parent-page-url.com') return;
 
  // 接收父页面发送的消息
  console.log('Message received in iframe:', event.data);
 
  // 向父页面发送消息
  event.source.postMessage('Hello from the iframe', '*');
});

在这个例子中，父页面的Vue组件包含一个iframe标签，并在加载完成时向其发送一条消息。iframe页面监听来自父页面的消息，并在接收到消息后作出响应，向父页面发送回复。这里使用了postMessage方法进行跨文档消息传递，并通过监听message事件来处理接收到的数据。