h5嵌套iframe实时传参(适用vue)
今天看到一个同事研究给iframe传参,由于好奇,我自己也写了个demo,说起来其实也挺简单的,但是在此之前没有用过,便想记录一下
其中主要用到的是postMessage
在页面中引入一个iframe标签
<template>
<div>
<iframe src="http://10.36.37.40:8081" ref="iframe"></iframe>
<input v-module='inputVal'>
<button @click='sendMessage'></button>
</div>
</template>
在父页面添加监听iframe传过来的数据,并且向iframe传参
<script>
export default {
data: {
iframeWin: null
},
mounted(){
window.addEventListener('message', this.handleMessage) // 监听iframe的事件
this.iframeWin = this.$refs.iframe.contentWindow
},
methods: {
handleMessage(event) {
let data=event.data
},
sendMessage() {
// 给iframe传参
this.iframeWin.postMessage({
cmd: 'getParams', // cmd 用来判断触发的是什么事件
params: {
key: this.params,
}
}, '*')
}
}
}
在iframe中向页面传递信息
<template>
<div>{{params}}</div>
</template>
<script>
export default {
data: {
params: null
},
mounted() {
// 接受父页面发来的信息
window.addEventListener('message', (event) => {
console.log(event)
let data = event.data
console.log(data)
switch (data.cmd) {
case 'getParams':
console.log('public data', data)
this.params = data.params.key
}
})
}
}
</script>
这样就可以实现将页面中输入的内容同步到iframe中了
h5嵌套iframe实时传参(适用vue)的更多相关文章
- 【vue】父向子组件传参、子组件向父传参
1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...
- vue,一路走来(12)--父与子之间传参
今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionno ...
- Vue的Router路由传参
一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接 h ...
- vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同
import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...
- Vue学习之路由vue-router传参及嵌套小结(十)
一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...
- 帆软用工具测试超链接打开弹窗(iframe嵌套),解决js传参带中文传递有乱码问题
1.新建超链接 随意点击一个单元格右击,选择 超级链接 2.在弹出的窗口中选择JavaScript脚本 如图: 其中红框框出的是几个要点 ,左边的就不讲了,右上角的参数cc是设置了公式remote ...
- vue页面传参和接参
https://blog.csdn.net/zhouzuoluo/article/details/81259298(copy) js** this.$router.push({ name: 'Flow ...
- vue2.0路由写法、传参和嵌套
前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...
- 从 Vue 的视角学 React(四)—— 组件传参
组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式, ...
随机推荐
- 《maven实战》笔记(5)----maven的版本
maven中构件和项目都有自己的版本,其中分为稳定的发布版本和不稳定的快照版本. 1.0.0.1.3-alpha-4和2.0就是稳定版本,而2.1-SNAPSHOT和2.1-20091214.2214 ...
- Java同步数据结构之PriorityBlockingQueue
前言 接下来继续BlockingQueue的另一个实现,优先级阻塞队列PriorityBlockingQueue.PriorityBlockingQueue是一个无限容量的阻塞队列,由于容量是无限的所 ...
- SQL-W3School-基础:SQL DISTINCT 语句
ylbtech-SQL-W3School-基础:SQL DISTINCT 语句 1.返回顶部 1. 本章讲解 SELECT DISTINCT 语句. SQL SELECT DISTINCT 语句 在表 ...
- pip install staty
ERROR: Complete output from command python setup.py egg_info:ERROR: Traceback (most recent call last ...
- 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_17.RabbitMQ研究-与springboot整合-消费者代码
创建消费者的类 使用@Component把这个类标记成一个Bean 把生产者里面创建的配置文件类复制过来 在原始的消费的方法上面 ,我们是可以拿到channel通道的 message.getBody就 ...
- 反射序列化字段的时候,需要添加[Datamember]不然会,忽略这个字段
反射序列化字段的时候,需要添加[Datamember]不然会,忽略这个字段
- 关于macOS上常用操作命令(持续更新)
1.mac上显示/隐藏Finder中的隐藏文件: 显示隐藏文件:在终端中输代码“defaults write com.apple.finder AppleShowAllFiles -boolean t ...
- 解决升Win10系统后VMware虚拟机不能联网的问题
刚升级到Win10系统,打开虚拟机发现不能联网,其实是系统服务项里缺少两个用到的服务,不能联网了,下面教大家解决联网问题. 1.打开VMware虚拟机主页,点击“编辑——虚拟网络编辑器”. 2.点击左 ...
- 如何编写spring mvc 项目
src/main/resources/static 目录里放资源文件css js jpg src/main/resources/templates 目录里放模板,html模板/这里是内容的展示页面 s ...
- 洛谷 题解 P2280 【[HNOI2003]激光炸弹】
一道很好的二维前缀和模板题. 什么是二维前缀和? 从这张图可以看出前缀和的求法: Map[i][j]=Map[i-1][j]+Map[i][j-1]-Map[i-1][j-1]+Map[i][j]; ...