vue3-内嵌iframe的传参与接收参数

项目场景：当项目a需要用到项目b中的某个模块，如项目b中的支付模块 与 项目a的支付模块是通用的，可以使用iframe将项目b内嵌在项目a中，达到代码功能复用的效果。

前言

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

一、内嵌iframe

项目a代码如下：

<template><divclass="iframe"v-if="payShow"><!--iframeUrl 需要内嵌展示的url 传值可以直接拼接在路径后 如：https://xxx.com?data='需要传的参数'--><iframeid="iframe":src="iframeUrl"frameborder="0"style="width:100%;height: 100%;"></iframe></div></template>

二、iframe传参

此时项目a中内嵌了iframe展示项目b，项目b中需要点击关闭按钮，将自己在项目a中关闭，这个时候需要项目b点击事件触发时，将这个操作响应给项目a，所以需要项目b给项目a传参。使用方法：window.parent.postMessage() , 具体参数和使用详细可以查看官网：https://developer.mozilla.org/zh-CN/docs/Web/API/Window/postMessage
项目b代码如下：

consthandleBack=()=>{let data ={judge:false,}// 传参
      window.parent.postMessage(data,'*')}

三、接收iframe参数

接收参数使用方法： addEventListener(事件名称，执行函数，触发类型) 用于向指定元素添加监听事件，配合removeEventListener() 方法来移除事件。
项目a代码如下：

onMounted(()=>{// message 该事件通过或者从对象(WebSocket, Web Worker, Event Source 或者子 frame 或父窗口)接收到消息时触发
    window.addEventListener('message',payEvent)})constpayEvent=(event)=>{if(event.data){
          payShow.value = event.data.judge
    }}onUnmounted(()=>{
      window.removeEventListener('message',payEvent)})

总结

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