前言

　　项目需要，我需要引入一个已经封装好的浏览器插件。插件只能以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. Ubuntu Qt5.13 无法输入中文和中文显示乱码问题

    无法输入中文: sudo apt-get install libfcitx-qt5-dev cd /usr/lib/x86_64-linux-gnu/qt5/plugins/platforminput ...

  2. 如何用js做关灯游戏

    编辑器  Sublime Text 3 <!DOCTYPE html><html lang="en"><head> <meta chars ...

  3. 代码审计-phpcms9.6.2任意文件下载漏洞

    漏洞文件: phpcms\modules\content\down.php 1.在download函数中对文件的校验部分 首先 if(preg_match('/(php|phtml|php3|php4 ...

  4. UVA10228 A Star not a Tree?

    [返回模拟退火略解] 题目描述 一平面上有 nnn 个点 {Ai}\{A_i\}{Ai​},求一个点 XXX 使得σ=∑i=1ndis(Ai,X)\sigma=\sum_{i=1}^{n}{dis(A ...

  5. python类方法@classmethod与@staticmethod

    目录 python类方法@classmethod与@staticmethod 一.@classmethod 介绍 语法 举例 二.@staticmethod 介绍 语法 举例 python类方法@cl ...

  6. 用深度优先搜索(DFS)解决多数图论问题

    前言 本文大概是作者对图论大部分内容的分析和总结吧,\(\text{OI}\)和语文能力有限,且部分说明和推导可能有错误和不足,希望能指出. 创作本文是为了提供彼此学习交流的机会,也算是作者在忙碌的中 ...

  7. 算法<初级> - 第一章 排序相关问题

    算法 - 第一章 时间复杂度: Big O 时间/空间复杂度计算一样,都是跟输入数据源的大小有关 n->∞ O(logn) 每次只使用数据源的一半,logn同理 最优解 先满足时间复杂度的情况最 ...

  8. Java基础（二十四）Java IO（1）输入/输出流

    在Java API中,可以从其中读入一个字节序列的对象称作输入流,而可以向其中写入一个字节序列的对象称为输出流. 输入流的指向称为源,程序从指向源的输入流中读取数据. 输出流的指向是字节要去的目的地, ...

  9. vue-cli安装方法

    vue-cli:vue文件,css文件,less文件,图片--->htmles6代码--->es5代码 template标签里面,只能有1个跟元素 script标签里面导入组件import ...

  10. 设计模式C++描述----19.命令(Command)模式

    一. 举例说明 我们知道,在多线程程序中,多个用户都给系统发 Read 和 Write 命令.这里有几点需要说明: 1. 首先明确一点,所有的这些 Read 和 Write 命令都是调用一个库函数. ...