vue 传参iframe

vue3 正确通信方式

一、内嵌iframe

既然两个项目中有共通的内容 就少不了互相通信。核心的两个方法是 传值：postMessage() 和
接收值：addEventListener()。

<template>
    <iframe  id="iframe" @load="sendMessage" src="http://localhost:8080" width="100%" height="100%" frameborder="0"></iframe>
</template>

vue 项目iframe 相互传值这个项目是vue3
二、iframe传参

<script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
let iframe: any =null // 绑定iframe标签ref
onMounted(() => {
  // message 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
  window.addEventListener('message', payEvent)
})
// 传递参数到iframe
const sendMessage = (e: any) => {
  iframe = document.querySelector('#iframe')
  iframe.contentWindow.postMessage("token", "*")
  
}
// i接收frame参数
const payEvent = (event: any) => {
  console.log(event);
  if (event.data) {
    // payShow.value = event.data.judge
  }
}
//卸载事件
onUnmounted(() => {
  window.removeEventListener('message', payEvent)
})
</script>

三、接收参数

vue3

<template>
 <div> 我只iframe项目</div>
</template>
<script setup lang="ts">
import {  onMounted,onUnmounted } from "vue";
onMounted(() => {
  //向父项目传值 
  window.parent.postMessage("hello，我即将传给父项目", "*");

  //绑定事件接收父项目传来的值
  window.addEventListener("message", handleMessage);
});
//卸载事件
onUnmounted(() => {
  window.removeEventListener('message', handleMessage)
})
const handleMessage = (event: any) => {
  console.log("这里是父项目传来的值", event.data);
};
</script>
 

vue2

created() {
		window.parent.postMessage("hello，我即将传给父项目", "*");
		//卸载
      window.removeEventListener('message', this.init)
      //挂载
      window.addEventListener('message', this.init)
  },
  methods: {
        init(e) {
            console.log(e, 'editor')
        },
 }

如果typescript使用 window创建方法报错的话，请在项目src或者根目录下新建（xxx.d.ts）如（typings.d.ts）文件

declare interface Window {
  XXX: any
}

iframe的传参与接收参数到此完成，最后记得页面关闭时移除监听事件。