前言

　　项目需要，我需要引入一个已经封装好的浏览器插件。插件只能以html的方式调用，

　　所以。我把插件的使用封装了一个html页面。vue项目则利用iframe的方式引入。

　　到这里我就遇到了一个问题，那就是vue项目中iframe的传值问题，这里做个笔记防止之后忘记，

　　如果有其他的方式，欢迎大家交流，不胜感激。

正文

　　先写几个简易的demo

　　需要用到的html

<!DOCTYPE html>

<html lang="en" style="height: 100%;">

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <link rel="icon" href="<%= BASE_URL %>favicon.ico">

  <title>测试damo</title>

</head>

<body>

  <noscript>

    <strong>请使用支持javascript的浏览器</strong>

  </noscript>

  <div id="app">1213123111220980980</div>

  <button onclick="setData()">打印本地的值</button>

  <button onclick="getData()">点击获取值vue的值</button>

</body>

<script>

  var wpsData;

  var aaaaa = '22222'

  function setData(){

    alert(aaaaa)

  }

  function getData(){

    alert(wpsData)

  }

</script>

</html>

父级页面用iframe调用html

<template>

  <div>

    <div>在线文档编译组件</div>

    <el-button @click="getData()">点击获取iframe数据</el-button>

    <el-button @click="setData('我是vue数据')">向iframe中发送数据</el-button>

    <iframe id="mainIframe" ref="mainIframe" name="mainIframe" src="./test.html" frameborder="0" scrolling="auto" @load="loaded" />

  </div>

</template>

<script>

export default {

  name: 'wps-edit',

  props: { },

  mounted() {

  },

  methods: {

    getData() {

    },

    setData(data) {

    }

  }

}

</script>

<style lang="scss" scoped></style>

这里提供两种传值方式：

第一种：postMessage

1、父页面生命周期函数中
const mapFrame = this.$refs['mainIframe']

    if (mapFrame.attachEvent) { // 兼容浏览器判断

      mapFrame.attachEvent('onload', function() {

        const iframeWin = mapFrame.contentWindow

        iframeWin.postMessage('初始化值', '*')

        // data传递的参数   *写成子页面的域名或者是ip

      })

    } else {

      mapFrame.onload = function() {

        const iframeWin = mapFrame.contentWindow

        iframeWin.postMessage('初始化值', '*')

      }

    }
2、html页面接受数据
window.addEventListener('message', function(messageEvent) {

        var data = messageEvent.data;

        console.log('收到vue的数据：',data);

        wpsData = data

        console.log('wpsData：',wpsData);

    }, false);

在页面加载结束，你就能发现html页面中的wpsData值已经被改变成了父级页面传过来的值。

这种方式是加载一次，数据不能实时同步，或者我没有实时同步数据的方法

第二种：直接操作iframe

1、父级页面直接给iframe的window对象设置值
setData(data) {

      const obj1 = window.frames['mainIframe']// 获得对应iframe的window对象

      obj1.wpsData = '设置的数据'

    }
2、父级页面设置完值后，在html页面直接打印对应的参数，此时会发现wpsData数据已经改变
function getData(){

    alert(wpsData)

  }

这种方式每次在父级页面改变值，html页面就会实时更新数据，我暂时用的这种方式，至于有什么bug，我正在研究。

完整的页面代码

html页面

<!DOCTYPE html>

<html lang="en" style="height: 100%;">

<head>

  <meta charset="utf-8">

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <link rel="icon" href="<%= BASE_URL %>favicon.ico">

  <title>测试damo</title>

</head>

<body>

  <noscript>

    <strong>请使用支持javascript的浏览器</strong>

  </noscript>

  <div id="app">1213123111220980980</div>

  <button onclick="setData()">打印本地的值</button>

  <button onclick="getData()">点击获取值vue的值</button>

</body>

<script>

  var wpsData;

  window.addEventListener('message', function(messageEvent) {

        var data = messageEvent.data;

        console.log('收到vue的数据：',data);

        wpsData = data

        console.log('wpsData：',wpsData);var aaaaa = '22222'

  function setData(){

    alert(aaaaa)

  }

  function getData(){

    alert(wpsData)

  }

</script>

</html>

父级页面

<template>

  <div>

    <div>在线文档编译组件</div>

    <el-button @click="getData()">点击获取iframe数据</el-button>

    <el-button @click="setData('我是vue数据')">向iframe中发送数据</el-button>

    <iframe id="mainIframe" ref="mainIframe" name="mainIframe" src="./test.html" frameborder="0" scrolling="auto" @load="loaded" />

  </div>

</template>

<script>

// 工具类

export default {

  name: 'wps-edit',

  props: {

  },

  mounted() {

    const mapFrame = this.$refs['mainIframe']

    if (mapFrame.attachEvent) { // 兼容浏览器判断

      mapFrame.attachEvent('onload', function() {

        const iframeWin = mapFrame.contentWindow

        iframeWin.postMessage('初始化值', '*')

        // data传递的参数   *写成子页面的域名或者是ip

      })

    } else {

      mapFrame.onload = function() {

        const iframeWin = mapFrame.contentWindow

        iframeWin.postMessage('初始化值', '*')

      }

    }

  },

  methods: {

    loaded() {

      const vm = this.$refs.mainIframe.contentWindow.vm

      console.log(vm)

      // vm.func1()

    },

    getData() {

      const obj1 = window.frames['mainIframe']// 获得对应iframe的window对象

      alert(obj1.aaaaa)

    },

    getWpsData() {

      return 'wps数据'

    },

    setData(data) {

      const obj1 = window.frames['mainIframe']// 获得对应iframe的window对象

      obj1.wpsData = '设置的数据'

    }

  }

}

</script>

<style lang="scss" scoped></style>

结尾

　　学无止境，还是有很多不知道的，继续精进技术。。。

　　欢迎大家沟通交流。

vue项目iframe的传值问题的更多相关文章

  1. 在vue项目中通过iframe引入jquery项目

    最近公司因为原来的jq框架存在的问题太多,所以要进行主题框架的重新搭建,我使用的vue进行的主题框架的重新搭建,但是原来的页面已经完成很多了,而且都是使用的jquery进行开发的 在vue中引入jqu ...

  2. Vue项目中同级组件传值的例子

    大家好,今天给大家带来Vue项目中同级组件之间传值的例子,父子组件之间的通信比较简单,这里不做讨论. 假设该项目中的需求如下: 图中左上角有一个按钮,我们的需求是点击它时,侧边导航栏收缩且主界面放大, ...

  3. Vue项目经验

    Vue项目经验 setInterval路由跳转继续运行并没有及时进行销毁比如一些弹幕,走马灯文字,这类需要定时调用的,路由跳转之后,因为组件已经销毁了,但是setInterval还没有销毁,还在继续后 ...

  4. vue项目结构

    前言 我在 搭建vue项目环境 简单说明了项目初始化完成后的目录结构. 但在实际项目中,src目录下的结构需要跟随项目做一些小小的调整. 目录结构 ├── src 项目源码目录 │ ├── api 所 ...

  5. Vue项目需求实现记录(永久更新)

    1.表单校验功能: 在el-form标签中定义:rules="rules";ref="reference" 在el-form-item定义prop=" ...

  6. vue父子组件的传值总结

    久违的博客园我又回来了.此篇文章写得是vue父子组件的传值,虽然网上已经有很多了.写此文章的目的就是记录下个人学习的一部分.接下来我们就进入主题吧! 在开发vue项目中,父子组件的传值是避免不掉的. ...

  7. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

  8. Vue项目框架

    Vue项目框架 基本组件的使用: new Vue({ el, //要绑定的DOM element data, //要绑定的资料 props, //可用来接收父原件资料的属性 template, //要 ...

  9. Vue.js之组件传值

    Vue.js之组件传值 属性传值可以从父组件到子组件,也可以从子组件到父组件. 这里讲一下从父组件到子组件的传值 还以上次的demo为例,demo里有APP.vue是父组件,Header.vue,Us ...

随机推荐

  1. Cobalt Strike之CHM、LNK、HTA钓鱼

    CHM钓鱼 CHM介绍 CHM(Compiled Help Manual)即“已编译的帮助文件”.它是微软新一代的帮助文件格式,利用HTML作源文,把帮助内容以类似数据库的形式编译储存.利用CHM钓鱼 ...

  2. [NOIp2014] luogu P2312 解方程

    题目描述 已知方程∑i=0naixi=0\sum_{i=0}^{n}{a_ix^i}=0i=0∑n​ai​xi=0求该方程在 [1,m][1,m][1,m] 内的整数解. Solution 有一个秦九 ...

  3. [USACO15DEC]高低卡(白金)High Card Low Card (Platinum)

    题目描述 Bessie the cow is a hu e fan of card games, which is quite surprising, given her lack of opposa ...

  4. Centos 7 集成安装Apache+PHP+Kerberos+LDAP+phpLDAPadmin

    一.安装Apache 1.1.安装Apache Apache程序是目前拥有很高市场占有率的Web服务程序之一,其跨平台和安全性广泛被认可且拥有快速.可靠.简单的API扩展. 它的名字取自美国印第安人土 ...

  5. C++ Web框架::cintara

    1.Cinatra是由C++开源社区purecpp发起的一个开源项目,是一个现代C++写的Web框架,旨在给用户提供一个易用.灵活和高性能的Web框架,让用户能完全专注于核心逻辑而无需关注http细节 ...

  6. 使用unittest，if __name__ == '__main__'：里代码不执行的解决办法

    参考:https://www.cnblogs.com/hanmk/p/8656574.html

  7. Vue学习系列(三)——基本指令

    前言 在上一篇中,我们已经对组件有了更加进一步的认识,从组件的创建构造器到组件的组成,进而到组件的使用,.从组件的基本使用.组件属性,以及自定义事件实现父子通讯和巧妙运用插槽slot分发内容,进一步的 ...

  8. 【MongoDB详细使用教程】二、MongoDB基本操作

    目录 数据类型 数据库操作 集合操作 数据操作 增 查 改 修改整行 修改指定字段的值 删 数据类型 MongoDB常见类型 说明 Object ID 文档ID String 字符串,最常用,必须是有 ...

  9. 前端路由hash、history原理及简单的实践下

    阅读目录 一:什么是路由?前端有哪些路由?他们有哪些特性? 二:如何实现简单的hash路由? 三:如何实现简单的history路由? 四:hash和history路由一起实现 回到顶部 一:什么是路由 ...

  10. Qt乱码的问题

    1.在启动应用程序前加入以下代码: //配置字符编码环境,让应用程序支持中文. QTextCodec *codec = QTextCodec::codecForName("System&qu ...