vue3内嵌iframe的传参与接收参数代码示例
作者：fat_shady
这篇文章主要给大家介绍了关于vue3内嵌iframe的传参与接收参数的相关资料,Vue项目中使用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的传参与接收参数到此完成，最后记得页面关闭时移除监听事件。
到此这篇关于vue3内嵌iframe的传参与接收参数的文章就介绍到这了,更多相关vue3内嵌iframe传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！