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'letiframe: any =null// 绑定iframe标签refonMounted(()=>{// message 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
  window.addEventListener('message', payEvent)})// 传递参数到iframeconstsendMessage=(e: any)=>{
  iframe = document.querySelector('#iframe')
  iframe.contentWindow.postMessage("token","*")}// i接收frame参数constpayEvent=(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)})consthandleMessage=(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 interfaceWindow{XXX: any
}

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