前言

　　项目需要，我需要引入一个已经封装好的浏览器插件。插件只能以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. thinkphp5框架之请求

    又看到请求这一部分,个人认为这部分是算重要的一部分 单独记一篇笔记. 0x01 request请求对象 如果要获取当前的请求信息,可以使用\think\Request类,完全开发手册中也有提到,继承系 ...

  2. 前端工程师如何理解 TCP/IP 传输层协议？

    网络协议是每个前端工程师都必须要掌握的知识,TCP/IP 中有两个具有代表性的传输层协议,分别是 TCP 和 UDP,本文将介绍下这两者以及它们之间的区别. TCP/IP网络模型 计算机与网络设备要相 ...

  3. RIDE的Edit界面

    有四种类型的Edit界面(注:测试套件主要是存放测试案例,资源文件主要是存放用户关键字) 1.测试套件(file类型)的Edit界面 首先展开Setting: 对右侧红框按钮简单说明: Library ...

  4. 如何在CentOS6.4系统上安装KVM虚拟机

    CentOS6.4系统上安装KVM虚拟机   备注:以下操作说明是经过实验验证后总结出来的笔录,有需要的朋友可以进行参考,以下是基于VMware12.5.2虚拟机版本上安装的实验环境. 一.安装KVM ...

  5. 16.Nginx HTTPS实践

    1.不做任何修改实现http跳转https(协议间的跳转): return [root@web01 conf.d]# cat url.cheng.com.conf server { listen 80 ...

  6. 打python&adb组合拳，实现微信读书永久免费读

    用过“微信读书”的朋友都知道,如果我们想阅读全本的付费书籍,除了购买整本(使用书币)外,还可以使用无限卡.可无论是购买全书还是无限卡,归根结底都是要花银子的. 除此之外,还有一种方式——用阅读时长兑换 ...

  7. JavaScript 变量作用域和声明提升

    一.变量作用域 说到这个概念,不有自主的想到this,scope 这两个关键字. JavaScript的this总是指向一个明确的对象,这个对象是在执行的时候动态绑定的.通俗的说就是谁调用我,我的th ...

  8. Java面试题---基础篇

    经常阅读一些牛人的基础博以及相关个人经历,你才发现自己真的不够努力,人生路漫漫,希望本人以及看客能走出一条自己不后悔的人生路,骚年  加油!!! 回归正题 一  java基础知识点 1)java面向对 ...

  9. 用Python将处理数据得到的csv文件分类（按顺序）保存

    用Python中的os和numpy库对文件夹及处理数据后得到的文件进行分类保存: import numpy as np import os for m in range(699,0,-35): cur ...

  10. rabbitmq学习-如何安装rabbitmq

    学习当然还是需要看官网地址的哈 官网地址 你可能会说老铁,看不懂英文咋办?我只能说各大翻译软件以及广大网友总有一款是你喜欢的 广大网友翻译的 中文文档 什么是rabbitmq? rabbitmq (R ...