vue与iframe之间的交互方式(一看就会)
目录
- vue与iframe之间的交互
- 子页面向父页面传值
- 父页面向子页面传值
- vue与html之间iframe交互
- 1.父级调用子级ifram中的方法
- 2.子级iframe(html 或者vue)调用父级html中的方法
- 3.vue中调用子级iframe html 中的方法
- 4.在iframe中调用vue中的方法
vue与iframe之间的交互
首先介绍一下使用背景,前端采用html单页面引用vue的方式(逼不得已这么做,否则直接用vue不香嘛),废话不多说
页面大致是这样,现在需要做的是在iframe页面里面触发事件跳转页面,并且使父级vue页面的左侧菜单选中相应页面的菜单,当然iframe子页面也是vue,但是其他页面也不影响
子页面向父页面传值
1.在iframe页面里触发事件,找到他的父级页面的dom元素,用postMessage传值,里面所有的都是参数,cmd是为了能在父级vue页面区分该操作的用途
2.在父级vue页面的周期函数mounted中监听iframe中发来的消息,传来的参数就在event.data里面。(loadHtmlFrag()则是在父级vue页面methods中的方法)
父页面向子页面传值
会了子页面向父业面传值,那父页面向子页面传值也就会了,就是吧一二步骤调换未知
1.在父页面中触发事件传递参数,在父页面通过ref来得到iframe子页面的dom元素,然手使用postMessage传参。
另:通过ref获取dom,父页面的iframe标签里写ref就行
2.和上面一样,在子页面的周期函数mounted中监听父页面发来的消息
vue与html之间iframe交互
1.父级调用子级ifram中的方法
document.getElementById(“id”).contentWindow.func()
id为iframe的id,func为引入iframe中的方法
2.子级iframe(html 或者vue)调用父级html中的方法
window.parent.func()
func为父级html的方法
3.vue中调用子级iframe html 中的方法
this.$refs.iframe.contentWindow.func()
4.在iframe中调用vue中的方法
先把vue中的方法暴露到window对象上
created(){ let _this = this window.funcname = ()=>{ //vue中的方法 _this.func() } }
在iframe中调用
window.parent.funcname()
以上为个人经验,希望能给大家一个参考,也希望大家多多支持我们。
相关推荐
-
Vue中使用iframe踩坑问题记录 iframe+postMessage
目录 使用iframe踩坑记录 iframe+postMessage 1.iframe的初始高度问题 2.postMessage的实现 iframe使用postMessage传值addEventListener未接收到却收到webpackwarning问题 bug如下 问题解决 使用iframe踩坑记录 iframe+postMessage 需求:最近在写一个博客的功能模块,技术栈是单独选择的vuepress,完成后想要融合到一个vue工程里,考虑到后期维护的问题,就通过iframe将vuepr
-
vue中使用iframe嵌入网页,页面可自适应问题
目录 使用iframe嵌入网页,页面可自适应 vue iframe高度自适应 实用 实时刷新iframe高度变化 iframe高度有变的时候通知父级 iframe高度有变的时候直接修改iframe高度 使用iframe嵌入网页,页面可自适应 在项目中遇到要嵌入第三方网页的需求,因为没有同第三方页面交互的需求,只需展示即可,所以最终决定使用 iframe 将第三方的网页嵌入到系统中,并且做到自适应效果. 考虑到以后可能会增加嵌入页面的数量,故而封装成组件,供以后复用: 上图为系统整体结构图,需要在
-
vue中如何通过iframe方式加载本地的vue页面
目录 通过iframe方式加载本地的vue页面 iframe方式加载本地的vue页面的第一种方法 iframe方式加载本地的vue页面的第二种方法 iframe方式加载本地的vue页面的第三种方法 关于iframe在vue中应用问题 iframe的宽高无法根据内容撑开 通过iframe方式加载本地的vue页面 也是在实际的项目中碰到一个奇葩的需求,用vue,居然还要用到iframe,真是脑壳大,试了好多次最后才找到了正确的方法. 总共有三种方法吧 iframe方式加载本地的vue页面的第一种方法
-
vue中iframe的使用及说明
目录 关于iframe的使用 获取iframe里面的内容 CDM跨域 使用iframe的总结 代码展示 关于iframe的使用 iframe在同域时能自由操作iframe和父框架的内容(DOM),在跨域时可以实现页面跳转. <iframe id="iframe" :src="iframeSrc" style="height: calc(100% - 50px)" width="100%" frameborder=&quo
-
vue中iframe使用以及结合postMessage实现跨域通信
目录 使用场景 需求 iframe使用 基本使用 常用属性 iframe高度自适应 获取iframe的内容 同域下获取父级/子级内容 iframe跨域 postMessage通信 在vue中使用 使用场景 需求 在一个H5项目的页面中以url的方式嵌入另一个项目的页面.(不得不使用iframe) 而为了兼容移动端api(封装的一个移动端api,iframe内嵌页面不生效),需要实现父子页面的通信 (使用postMessage). iframe使用 基本使用 直接在页面嵌套iframe标签指定sr
-
vue与iframe之间的交互方式(一看就会)
目录 vue与iframe之间的交互 子页面向父页面传值 父页面向子页面传值 vue与html之间iframe交互 1.父级调用子级ifram中的方法 2.子级iframe(html 或者vue)调用父级html中的方法 3.vue中调用子级iframe html 中的方法 4.在iframe中调用vue中的方法 vue与iframe之间的交互 首先介绍一下使用背景,前端采用html单页面引用vue的方式(逼不得已这么做,否则直接用vue不香嘛),废话不多说 页面大致是这样,现在需要做的是在if
-
vue与iframe之间的信息交互的实现
说一下我的使用场景:在vue中使用百度地图,需要使用离线地图 先上代码 然后细细品 第一张图 第二张图 第三张图 1.首先iframe 引入你要嵌套的地址 2 .通过vue中给出的ref 来获取 ifarme的DOM元素 如图中的 this.iframeWin = this.$refs.iframe.contentWindow [拿到iframe的window对象] 3.vue如何向iframe内传送信息 可以通过H5新属性 postmessage 注释:[postMessage是有点类似于UD
-
vue实现样式之间的切换及vue动态样式的实现方法
前言 既然我们选择了vue,那么在做东西时就不要想着去操作dom,所有的都交给vue来解决. 下面来说一个很简单但是很常用的效果,可能人人都会用到这样的需求 请看下图 导航栏的样式切换功能,如果我们使用jquery之类的东西来写,可能要写好多代码,那么我们用vue呢, 代码如下 html 附上vue中style与class绑定API <div id="wrap" class="box"> <div v-for="(list,index)
-
vue祖孙组件之间的数据传递案例
**解决的问题:** 使用$attrs和$listeners实现祖孙组件之间的数据传递,也就是多重嵌套组件之间的数据传递. **注意:** 本方法针对vue2.4版本及以上,使用$attrs和$listeners来实现的 **解决方案:** **首先创建父组件:** 父组件用于动态数据的绑定与事件的定义 <template> <div> <!--这里 :one和:two是向后代组件传递数据--> <child1 :one="child1" :t
-
asp.net 文件上传与刷新与asp.net页面与iframe之间的数据传输
具体我们如何实现文件的异步刷新,目前网上已经有了很多文章来解决这个问题,但是会用到大量的javascript,由于本人编码功力尚浅,所以之今没有高清其中的所以然,但是在解决的方案中他们貌似都用到了iframe,这让我茅塞顿开,所以我就说说用这个处理刷新的思路. 首先一个实际的页面中往往是会有较多的内容,我们暂时把它分为A,B两个区域,A区域是内容区域,我们可以用updatepanel来实现异步刷新,B区域是上传区域,我们用div已经ifame占位,其中上传的具体功能实现我们可以放到C页面中,这样
-
javascirpt实现2个iframe之间传值的方法
本文实例讲述了javascirpt实现2个iframe之间传值的方法.分享给大家供大家参考,具体如下: index.htm <body> <table border="1" width="100%"> <tr> <td width="100%"><iframe src="iframe1.htm" name="aa"></iframe>&
-
vue 路由页面之间实现用手指进行滑动的方法
问题描述:vue 路由页面之间如何用手指进行滑动 解决方法: 1.下载依赖:npm intall vue-touch --save -D 2.在需要滑动的页面添加标签;<v-touch> 注意要宽高,当页面有东西要写入时,可用v-touch 包裹着其他标签: 如:<v-touch class="controller" v-on:swipeleft="onSwipeLeft" v-on:swiperight="onSwipeRight&
-
基于vue 兄弟组件之间事件触发(详解)
直奔主题! 兄弟组件之间的事件触发,大概思路是通过父级组件交换数据,watch来监听触发事件. 场景是父级组件A同时引用两个子级组件B,C.点击B组件中的按钮执行C组件中的事件. 第一步:父级组件A <bottom-play :play="playStatus" @playStatus="btmChild"></bottom-play> methods:{ listChild:function(val){//B组件自定义事件 状态是布尔值 t
-
vue实现组件之间传值功能示例
本文实例讲述了vue实现组件之间传值功能.分享给大家供大家参考,具体如下: slot标签: 想向封装好结构的组件中插入内容,需要借助<slot></slot> 在组件之中进行关联:如 模板中: <slot name='txt'></slot> 组件调用中: <p slot='txt'></p> 注:如果只有slot上面每一定义name属性,则只能有一个slot <div class='box'> <com> &
-
Vue父子组件之间的通信实例详解
在vue组件通信中其中最常见通信方式就是父子组件之中的通信,而父子组件的设定方式在不同情况下又各有不同.最常见的就是父组件为控制组件子组件为视图组件.父组件传递数据给子组件使用,遇到业务逻辑操作时子组件触发父组件的自定义事件.无论哪种组织方式父子组件的通信方式都是大同小异. 一.父组件到子组件通讯 父组件到子组件的通讯主要为:子组件接受使用父组件的数据,这里的数据包括属性和方法(String,Number,Boolean,Object, Array ,Function).vue提倡单项数据流,因
随机推荐
- Vue中定义全局变量与常量的各种方式详解
- 指定位置如果有图片显示图片,无图片显示广告的JS
- JS实现兼容各种浏览器的高级拖动方法完整实例【测试可用】
- EL表达式截取字符串的函数说明
- js keycode快捷键大全 并附有简单使用说明
- php实现mysql数据库分表分段备份
- 10款最好的Web开发的 Python 框架
- JavaScript实现GriwView单列全选(自写代码)
- NodeJS遍历文件生产文件列表功能示例
- asp生成三维饼图的函数
- 深入理解JavaScript系列(6):S.O.L.I.D五大原则之单一职责SRP
- 解决SQLServer远程连接失败的问题
- sql server获得新记录标识列值的二种方法
- jquery tagname 取得方法
- 了解jQuery技巧来提高你的代码
- jQuery事件_动力节点Java学院整理
- 一个很酷的拖动层的js类,兼容IE及Firefox
- JS 数组 移除 实现代码
- 浅谈javascript中replace()方法
- C++中回调函数(CallBack)的用法分析