iframe 互相通信

一、 背景 一个项目为vue2，一个项目为vue3，两个不同的项目实现iframe嵌入，并实现通信

二、案例代码

** 父页面**

<div
  class="frame box_main overflow-hidden"
  v-loading="loading"
  element-loading-text="加载中..."
>
  <iframe
    :src="frameSrc"
    class="frame-iframe"
    ref="MyiFrame"
  />
</div>


js代码
```
<script setup lang="ts">

window.addEventListener('message', function(event) {
//可以打印这个参数查看监听子页面发过来的参数
  if(event && event.data){
  //不同页面发送的参数不同可以通过传过来的类型判断
    if(event.data.type && event.data.type === 'database'){
        hideLoading();
    }else if(event.data.type && event.data.type === 'crawlab'){
      hideLoading();
    }
  }
}, false);

</script>

** end**

** 子页面**

//可以在某个方法去执行
setTimeout(()=>{
//花括号里面都可以自定义参数{}
  window.parent.postMessage({type:"crawlab",value:false}, '*');
},1000)

** end**