前言

　　项目需要，我需要引入一个已经封装好的浏览器插件。插件只能以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. HOOK 技术

    在介绍 截获系统消息钩子 之前,这几个函数是密切相关的: SetWindowsHookEx() 介绍: 功能:将应用程序定义的挂钩过程安装到挂钩链中. 函数原型:HHOOK SetWindowsHoo ...

  2. PHP array_udiff_uassoc

    1.函数的参数:返回数组的差集.用定义的函数比较键值和值. 2.函数的参数: @params array $array @params array $array1 ... @params callab ...

  3. （20）ASP.NET Core EF创建模型（必需属性和可选属性、最大长度、并发标记、阴影属性）

    1.必需和可选属性 如果实体属性可以包含null,则将其视为可选.如果属性的有效值不可以包含null,则将其视为必需属性.映射到关系数据库架构时,必需的属性将创建为不可为null的列,而可选属性则创建 ...

  4. Tomcat 的单机多实例配置

    有时候需要在一个服务器上部署多个Tomcat,通过不同的端口进行区分,比如,反向代理.但是不想简单的通过复制Tomcat来实现,这样既不方便以后的升级也不方便管理,那么这时候就需要配置Tomcat的单 ...

  5. 数据结构c语言

    这篇博客是为了对数据结构进行一系列的学习整理,包括线性表,栈和队列,串,数组和广义表,树和二叉树,图,动态储存管理,查找,内部排序,外部排序文件进行部分笔记的记录. 基本概念和术语 数据:是对客观事物 ...

  6. ESP8266开发之旅 网络篇⑤ Scan WiFi——ESP8266WiFiScan库的使用

    1. 前言     现在,通常,为了让手机连上一个WiFi热点,基本上都是打开手机设置里面的WiFi设置功能,然后会看到里面有个WiFi热点列表,然后选择你要的连接上. 基本上你只要打开手机连接WiF ...

  7. IIS服务器文件跨域问题（几乎可以解决大多数跨域问题）

    Windows server 服务器 1:在管理工具中选择,找到IIS 2:打开IIS管理,找到网站 3:找到HTTP响应头标 4:打开HTTP响应头标 5:添加 添加:Access-Control- ...

  8. 有些需要禁用的PHP危险函数(disable_functions)

    phpinfo() 功能描述:输出 PHP 环境信息以及相关的模块.WEB 环境等信息. 危险等级:中 passthru() 功能描述:允许执行一个外部程序并回显输出,类似于 exec(). 危险等级 ...

  9. Flask解析（二）：Flask-Sqlalchemy与多线程、多进程

    Sqlalchemy flask-sqlalchemy的session是线程安全的,但在多进程环境下,要确保派生子进程时,父进程不存在任何的数据库连接,可以通过调用db.get_engine(app= ...

  10. SpringBoot之配置文件的注入

    @PropertySource&@ImportResource&@Bean @PropertySource:加载指定的配置文件: /** * 将配置文件中配置的每一个属性的值,映射到这 ...