今天看到一个同事研究给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)的更多相关文章

  1. 【vue】父向子组件传参、子组件向父传参

    1.父向子组件传参 App.vue为父,引入componetA组件之后,则可以在App.vue中使用标签(注意驼峰写法要改成componet-a写法,因为html对大小写不敏感,componenta与 ...

  2. vue,一路走来(12)--父与子之间传参

    今天想起一直没有记录父组件与子组件的传参问题,这在项目中一直用到. 父向子组件传参 Index.vue父组件中 <component-a :msgfromfa="(positionno ...

  3. Vue的Router路由传参

    一.文件结构 二.vue.js 打开此链接 https://cdn.bootcss.com/vue/2.6.10/vue.js 复制粘贴页面的所有内容 三.vue-router.js 打开此链接  h ...

  4. vue路由(一个包含重定向、嵌套路由、懒加载的main.js如下)and 路由跳转传参的query和params的异同

    import Vue from 'vue'import VueRouter from 'vue-router'import App from './App'Vue.use(VueRouter)cons ...

  5. Vue学习之路由vue-router传参及嵌套小结(十)

    一.路由传递参数: 1.使用query传值: <!DOCTYPE html> <html lang="en"> <head> <meta ...

  6. 帆软用工具测试超链接打开弹窗(iframe嵌套),解决js传参带中文传递有乱码问题

    1.新建超链接 随意点击一个单元格右击,选择 超级链接 2.在弹出的窗口中选择JavaScript脚本 如图: 其中红框框出的是几个要点   ,左边的就不讲了,右上角的参数cc是设置了公式remote ...

  7. vue页面传参和接参

    https://blog.csdn.net/zhouzuoluo/article/details/81259298(copy) js** this.$router.push({ name: 'Flow ...

  8. vue2.0路由写法、传参和嵌套

    前置知识请戳这里 vue-routerCDN地址:https://unpkg.com/vue-router@3.0.1/dist/vue-router.js vue-router下载地址:https: ...

  9. 从 Vue 的视角学 React(四)—— 组件传参

    组件化开发的时候,参数传递是非常关键的环节 哪些参数放在组件内部管理,哪些参数由父组件传入,哪些状态需要反馈给父组件,都需要在设计组件的时候想清楚 但实现这些交互的基础,是明白组件之间参数传递的方式, ...

随机推荐

  1. 《maven实战》笔记(5)----maven的版本

    maven中构件和项目都有自己的版本,其中分为稳定的发布版本和不稳定的快照版本. 1.0.0.1.3-alpha-4和2.0就是稳定版本,而2.1-SNAPSHOT和2.1-20091214.2214 ...

  2. Java同步数据结构之PriorityBlockingQueue

    前言 接下来继续BlockingQueue的另一个实现,优先级阻塞队列PriorityBlockingQueue.PriorityBlockingQueue是一个无限容量的阻塞队列,由于容量是无限的所 ...

  3. SQL-W3School-基础:SQL DISTINCT 语句

    ylbtech-SQL-W3School-基础:SQL DISTINCT 语句 1.返回顶部 1. 本章讲解 SELECT DISTINCT 语句. SQL SELECT DISTINCT 语句 在表 ...

  4. pip install staty

    ERROR: Complete output from command python setup.py egg_info:ERROR: Traceback (most recent call last ...

  5. 阶段5 3.微服务项目【学成在线】_day05 消息中间件RabbitMQ_17.RabbitMQ研究-与springboot整合-消费者代码

    创建消费者的类 使用@Component把这个类标记成一个Bean 把生产者里面创建的配置文件类复制过来 在原始的消费的方法上面 ,我们是可以拿到channel通道的 message.getBody就 ...

  6. 反射序列化字段的时候,需要添加[Datamember]不然会,忽略这个字段

    反射序列化字段的时候,需要添加[Datamember]不然会,忽略这个字段

  7. 关于macOS上常用操作命令(持续更新)

    1.mac上显示/隐藏Finder中的隐藏文件: 显示隐藏文件:在终端中输代码“defaults write com.apple.finder AppleShowAllFiles -boolean t ...

  8. 解决升Win10系统后VMware虚拟机不能联网的问题

    刚升级到Win10系统,打开虚拟机发现不能联网,其实是系统服务项里缺少两个用到的服务,不能联网了,下面教大家解决联网问题. 1.打开VMware虚拟机主页,点击“编辑——虚拟网络编辑器”. 2.点击左 ...

  9. 如何编写spring mvc 项目

    src/main/resources/static 目录里放资源文件css js jpg src/main/resources/templates 目录里放模板,html模板/这里是内容的展示页面 s ...

  10. 洛谷 题解 P2280 【[HNOI2003]激光炸弹】

    一道很好的二维前缀和模板题. 什么是二维前缀和? 从这张图可以看出前缀和的求法: Map[i][j]=Map[i-1][j]+Map[i][j-1]-Map[i-1][j-1]+Map[i][j]; ...