vue3内嵌iframe的传参与接收参数代码示例

更新时间：2023年07月24日 14:53:28 作者：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传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3 实现网页背景水印功能的示例代码
这篇文章主要介绍了Vue3 实现网页背景水印功能,这里水印的字体大小、颜色和排布参考了企业微信的背景水印，使得看起来不那么突兀，需要的朋友可以参考下
2022-08-08
详解如何去除vue项目中的#——History模式
这篇文章主要介绍了详解如何去除vue项目中的#——History模式，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-10-10
checkbox在vue中的用法小结
之前对于vue中用到过的checkbox也只是别人写好的组件，这次在自己实现时走了很多坑，特意写这篇文章记录到脚本之家平台，供大家参考
2018-11-11
vite/Vuecli配置proxy代理解决跨域问题
这篇文章主要介绍了vite/Vuecli配置proxy代理解决跨域问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-12-12
vue setInterval 定时器失效的解决方式
这篇文章主要介绍了vue setInterval 定时器失效的解决方式，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-07-07
vue3中element Plus插槽示例详解
这篇文章主要介绍了vue3中element Plus插槽,#default=scope定义了一个名为 default 的插槽,并将当前行的数据传递给一个名为 scope 的变量,本文结合示例代码介绍的非常详细,需要的朋友可以参考下
2024-05-05
Vue reactive函数实现流程详解
一个基本类型的数据,想要变成响应式数据,那么需要通过ref函数包裹,而如果是一个对象的话,那么需要使用reactive函数,这篇文章主要介绍了Vue reactive函数
2023-01-01
vue改变循环遍历后的数据实例
今天小编就为大家分享一篇vue改变循环遍历后的数据实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
在vue2.0中引用element-ui组件库的方法
这篇文章主要介绍了在vue2.0中引用element-ui组件库,需要的朋友可以参考下
2018-06-06
Vue.js实现网格列表布局转换方法
下面小编就为大家带来一篇Vue.js实现网格列表布局转换方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-08-08