前言

　　项目需要，我需要引入一个已经封装好的浏览器插件。插件只能以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. vi/vim编辑器使用方法详解

    vi编辑器是所有Unix及Linux系统下标准的编辑器,他就相当于windows系统中的记事本一样,它的强大不逊色于任何最新的文本编辑器.他是我们使用Linux系统不能缺少的工具.由于对Unix及li ...

  2. windows下安装scoop

    scoop是windows下的包管理工具,类似与linux下的yum和python的pip. scoop可以在windows下方便的进行软件的管理,尤其是对开发者提供了很大的遍历. cmd下执行如下红 ...

  3. Yii2.0教程应用结构篇 —— 入口脚本

    入口脚本是应用启动流程中的第一环,一个应用(不管是网页应用还是控制台应用)只有一个入口脚本.终端用户的请求通过入口脚本实例化应用并将将请求转发到应用. Web 应用的入口脚本必须放在终端用户能够访问的 ...

  4. CodeForces - 1214D D. Treasure Island

    题目链接:https://vjudge.net/problem/2728294/origin 思路:可以抽象成管道,先试试能不能找到一个通道能通到终点, 如果可以则封锁这个通道,一个石头即可, 再试试 ...

  5. 自己动手破解Z.EntityFramework.Extensions 4.0.11.0的方法

    因为项目中使用到Z.EntityFramework.Extensions 和 Z.EntityFramework.Plus(免费开源)两个类库,但是Z.EntityFramework.Extensio ...

  6. java类在何时被加载

    我们接着上一章的代码继续来了解一下java类是在什么时候加载的.在开始验证之前,我们现在IDEA做如下配置. -XX:+TraceClassLoading 监控类的加载 我们新建了一个TestCont ...

  7. mysql库表优化实例

    一.SQL优化 1.优化SQL一般步骤 1.1 查看SQL执行频率 SHOW STATUS LIKE 'Com_%'; Com_select:执行SELECT操作的次数,一次查询累加1.其他类似 以下 ...

  8. SpringBoot整合MybatisPlus3.X之Sequence(二)

    数据库脚本 DELETE FROM user; ​ INSERT INTO user (id, name, age, email) VALUES (, , 'test1@baomidou.com'), ...

  9. 如何理解swift中的delegate

    Delegation翻译为代理或者委托,是一种设计模式.顾名思义,使class或struct能够将某些职责移交给其他类型的实例. 该设计模式通过定义一个封装(包含)delegate的protocol( ...

  10. NOIP201605玩具谜题-解题报告

    NOIP201605玩具谜题-解题报告                                                                         2019-11- ...