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

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

前言

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

---

一、内嵌iframe

项目a代码如下：

<template>
	<div class="iframe" v-if="payShow">
	  <!--iframeUrl 需要内嵌展示的url 传值可以直接拼接在路径后 如：https://xxx.com?data='需要传的参数'-->
      <iframe id="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代码如下：

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

三、接收iframe参数

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

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

const payEvent=(event)=> {
    
    
    if (event.data) {
    
    
      	payShow.value = event.data.judge
    }
}

onUnmounted(() => {
    
    
  	window.removeEventListener('message',payEvent)
})

总结

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