vue3 通过ref传参iframe

vue 项目iframe 相互传值

<!-- 父项目 -->
<template>
<iframe
        width="100%"
        height="100%"
        style="border: 0"
        :src="iframeSrc"
        ref="iframeRef"
        id="iframeRef"
      ></iframe>
</template>
<script setup lang="ts">
//注册ref动态数据绑定 onMounted 等于vue2 mounted生命周期 
import {ref,onMounted} from "vue"
let iframeSrc = ref<string>("http://localhost:3000");
let iframeRef = ref<any>(null);   // 和iframe标签的ref绑定
let iframeWindow: any = null;   //iframe的window对象
onMounted(() => {
  // 父项目绑定一个message事件给iframe handleMessage：接收iframe传到父项目的值
  window.addEventListener("message", handleMessage); // 监听iframe的事件
  //vue3使用ref定义的变量需要使用.value获取值， vue2直接iframeRef.contentWindow
  iframeWindow = iframeRef.value.contentWindow;
  sendMessage();
});
const handleMessage = (event: string) => {
  console.log(event.data);
};
// 向iframe传参
const sendMessage = () => {
  if (iframeRef.value.attachEvent) {
    // 兼容IE浏览器判断 ie的window.onload 是隐藏的 需要用attachEvent注册
    iframeRef.value.attachEvent("onload", function () {
      //postMessage（message,origin） 向iframe发送参数
      //message：iframe接收的参数，最好字符串   origin：其值可以是字符串"*"（表示无限制）或者一个url
      iframeWindow.postMessage("token", "*");
    });
  } else {
    iframeRef.value.onload = function () {
      iframeWindow.postMessage("token", "*");
    };
  }
};
</script>

子项目=iframe项目

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

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

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

declare interface Window {
  XXX: any
}