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传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法
这篇文章主要介绍了vue router嵌套路由在history模式下刷新无法渲染页面问题的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-01-01
这篇文章主要介绍了vue内置组件Transition的详解,简单地说，就是当元素发生变化，比如消失、显示时，添加动画让它更自然过渡，它是vue内置组件，不需要引入注册就可以直接使用，本文通过实例代码介绍的非常详细，需要的朋友可以参考下2023-09-09
vue3之所以受广大袁友的喜欢，优点必不可少呀，比如：可以监听动态新增的属性；可以监听删除的属性 ；可以监听数组的索引和 length 属性；下面文章小编就来向大家介绍vue3，感兴趣的小伙伴不要错过奥2021-09-09
在现代 Web 开发中,字体文件通常是页面加载时间的重要因素之一,特别是在字体文件较大或网络环境不佳的情况下,用户体验可能会受到影响,本文将详细探讨如何在 Vue.js 项目中优化字体文件的加载和缓存,以提高页面性能,需要的朋友可以参考下2024-09-09
在这里就不过多说watch的用法了，这篇文章主要通过案例带大家了解一下如何清除过期的副作用。文中的示例代码讲解详细，感兴趣的小伙伴可以了解一下2023-01-01
这篇文章主要为大家详细介绍了如何利用vue3实现6位的密码输入框效果,文中的示例代码简洁易懂,感兴趣的小伙伴可以跟随小编一起学习一下2023-08-08
本文介绍一种基于css变量的主题切换实现方式,这种是最简单,最直接,最容易理解的方式,实现的原理就是定义不同的HTML根标签元素的样式,通过data属性来区分不同主题css变量样式,感兴趣的朋友可以参考下2024-06-06
unplugin-auto-import的配置以及eslint报错解决详解
unplugin-auto-import 解决了vue3-hook、vue-router、useVue等多个插件的自动导入,也支持自定义插件的自动导入,是一个功能强大的typescript支持工具,这篇文章主要给大家介绍了关于unplugin-auto-import的配置以及eslint报错解决的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue在页面右上角实现可悬浮/隐藏的系统菜单,实现思路大概是通过props将showCancel这个Boolean值传递到子组件，对父子组件分别绑定事件，来控制这个系统菜单的显示状态。需要的朋友可以参考下2018-05-05
这篇文章主要介绍了 Vue.js实现大转盘抽奖总结及实现思路，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-10-10
最新评论