位置: IT常识 - 正文

Vue中引入HTML静态资源文件(包含数据的传递)(html大屏)(vue-html)

编辑:rootadmin
Vue中引入HTML静态资源文件(包含数据的传递)(html大屏) 需求

推荐整理分享Vue中引入HTML静态资源文件(包含数据的传递)(html大屏)(vue-html),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue引入html静态文件,vue-html,vue引用html文件,html引入vue.js,vue引入静态js,vue引入静态js,vue引入html静态文件,vue 引入html,内容如对您有帮助,希望把文章链接给更多的朋友!

项目需要做一个可视化大屏,要的时间比较急,在查找大屏模板的时候找到了合适的一个静态的HTML+JS+CSS的一个模板,但是这个模板没有数据请求等工具方法,于是现在想要把这个html文件放在vue项目中,并且通过vue获取数据,把数据传到html页面,在页面内展示数据。

实现

首先,在项目的public文件夹下创建新文件夹(我创建的名字是bigdata),然后将你的html+js+css静态资源文件放在该文件夹下。 

在vue的项目中新建一个vue页面(别忘了创建对应的路由),该页面通过<iframe>标签将你的html页面放在里面,如下:

<template> <div class="iframe_box"> <div class="load" v-loading.fullscreen.lock="loading" element-loading-text="拼命加载中" ></div> <iframe :src="`${publicPath}bigdata/index1.html`" width="100%" height="100%" ref="iframeDom" ></iframe> </div></template>

在这个vue页面中你需要向后台请求数据,然后将数据传给   iframe 的那个静态页面。

难点

如何传递数据?

html页面加一个监听message的事件

<script type="text/javascript">dataT = {};console.log("开始接收函数");window.addEventListener('message', (data) => {dataT = data.data.total;console.log("拿到数据", dataT);});</script>Vue中引入HTML静态资源文件(包含数据的传递)(html大屏)(vue-html)

我的vue页面拿到数据之后,通过触发postMessage方法传送数据

ps:

contentDocument 属性能够以 HTML 对象来返回 iframe 中的文档。

可以通过所有标准的 DOM 方法来处理被返回的对象。

promise 的 all 方法 详解

Promise.all() - JavaScript | MDNPromise.all() 方法接收一个 promise 的 iterable 类型(注:Array,Map,Set 都属于 ES6 的 iterable 类型)的输入,并且只返回一个Promise实例, 那个输入的所有 promise 的 resolve 回调的结果是一个数组。这个Promise的 resolve 回调执行是在所有输入的 promise 的 resolve 回调都结束,或者输入的 iterable 里没有 promise 了的时候。它的 reject 回调执行是,只要任何一个输入的 promise 的 reject 回调执行或者输入不合法的 promise 就会立即抛出错误,并且 reject 的是第一个抛出的错误信息。https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all

mounted() { //拿到 这个html文件的dom let iframeWin = this.$refs.iframeDom.contentWindow; //获取数据 (我要请求的是很多数据,所以用了promise的all方法包装了一下) //没有这个需求的话 正常接收数据就行了。 Promise.all([ this.getHeadLeft(), this.getHeadRight(), this.getMIdLeft(), this.getMIdMid(), this.getBottomRight(), this.getBottomMid(), this.getBottomLeft(), ]) .then(() => { this.loading = false; console.log("开始发送数据"); iframeWin.postMessage( { total: this.total, }, "*" ); }) .catch((e) => { console.log(e); }); },

至此,传送数据成功。

成果

控制台:

页面:(数据都是后端拿过来的)

 如果有问题或是可以指导的可以留言讨论

本文链接地址:https://www.jiuchutong.com/zhishi/283582.html 转载请保留说明!

上一篇:【今日端午节】 (© Xinhua/Alamy Stock Photo)(今天端午节?)

下一篇:pascl32.exe - pascl32是什么进程 有什么用

  • 联想打印机怎么联网使用(联想打印机怎么调墨的深浅)

    联想打印机怎么联网使用(联想打印机怎么调墨的深浅)

  • mate30怎么开启防抖(华为mate30怎么设置防窥屏)

    mate30怎么开启防抖(华为mate30怎么设置防窥屏)

  • 苹果手机支不支持电信卡(苹果手机支不支持无线反向充电)

    苹果手机支不支持电信卡(苹果手机支不支持无线反向充电)

  • qq怎么建立群(QQ怎么建立群投票)

    qq怎么建立群(QQ怎么建立群投票)

  • mate30pro拍照模糊(华为mate30pro照相机拍照屏幕模糊)

    mate30pro拍照模糊(华为mate30pro照相机拍照屏幕模糊)

  • 微信可以屏幕共享吗(微信可以屏幕共享吗给别人看)

    微信可以屏幕共享吗(微信可以屏幕共享吗给别人看)

  • 17-40镜头适合哪些场景(17-40镜头效果)

    17-40镜头适合哪些场景(17-40镜头效果)

  • oppoa52指纹在哪里(oppoa52手机指纹消失了怎么办)

    oppoa52指纹在哪里(oppoa52手机指纹消失了怎么办)

  • 电池优化充电要关闭吗(优化电池充电坏处)

    电池优化充电要关闭吗(优化电池充电坏处)

  • 快手别人申请关注怎么同意(快手别人申请关注需要同意)

    快手别人申请关注怎么同意(快手别人申请关注需要同意)

  • 高端显卡和低端显卡的区别(高端显卡和低端显卡交火)

    高端显卡和低端显卡的区别(高端显卡和低端显卡交火)

  • b360主板配什么cpu(b360主板配什么cpu型号)

    b360主板配什么cpu(b360主板配什么cpu型号)

  • etc插卡一点反应都没有(etc插卡后无反应)

    etc插卡一点反应都没有(etc插卡后无反应)

  • 蓝牙耳机的麦克风在哪(蓝牙耳机的麦克风声音小怎么办)

    蓝牙耳机的麦克风在哪(蓝牙耳机的麦克风声音小怎么办)

  • 一般用什么制作h5(风管支架一般用什么制作)

    一般用什么制作h5(风管支架一般用什么制作)

  • 探探暗恋短信怎么查看是谁(探探暗恋短信怎么查看是谁发的)

    探探暗恋短信怎么查看是谁(探探暗恋短信怎么查看是谁发的)

  • 苹果11怎么设置电量百分比(苹果11怎么设置密码锁屏)

    苹果11怎么设置电量百分比(苹果11怎么设置密码锁屏)

  • 苹果11怎么装两张卡(苹果怎么装两个微信)

    苹果11怎么装两张卡(苹果怎么装两个微信)

  • 企业微信怎么添加个人(企业微信怎么添加新员工打卡)

    企业微信怎么添加个人(企业微信怎么添加新员工打卡)

  • 小象优品中的超额消费订单取消是什么意思(小象优品必过)

    小象优品中的超额消费订单取消是什么意思(小象优品必过)

  • 手机怎么把网址永久屏蔽(手机怎么把网址复制粘贴到浏览器上)

    手机怎么把网址永久屏蔽(手机怎么把网址复制粘贴到浏览器上)

  • 手环需要带手机吗(手环需要手机吗)

    手环需要带手机吗(手环需要手机吗)

  • 拼多多拒收在哪里操作(拼多多拒收在哪里操作图片)

    拼多多拒收在哪里操作(拼多多拒收在哪里操作图片)

  • 朋友圈仅部分人可见对方知道么(朋友圈仅部分人可见新好友能看到吗)

    朋友圈仅部分人可见对方知道么(朋友圈仅部分人可见新好友能看到吗)

  • 前后端分离项目,如何解决跨域问题?(前后端分离项目部署到服务器)

    前后端分离项目,如何解决跨域问题?(前后端分离项目部署到服务器)

  • mtr命令  网络诊断(网络命令traceroute)

    mtr命令 网络诊断(网络命令traceroute)

  • DedeCMS 友情链接按分类网站类型调用的方法(html友情链接模板)

    DedeCMS 友情链接按分类网站类型调用的方法(html友情链接模板)

  • 产权转移书据印花税政策
  • 公司老板有钱吗
  • 以前年度所得税退税会计分录
  • 监控系统维护费计入什么科目
  • 工会经费个人绩效计入缴费基数吗
  • 冲减以前年度多计的管理费用分录
  • 每月工资个税为零
  • 对方公司开发票我方未付款如何做分录?
  • 外币账户收款如何做账务处理呢?
  • 开具红字发票抵扣后如何退税?
  • 商贸公司购买的手提袋怎么入账
  • 收到分包工程发票怎么做分录
  • 企业间借款利息怎么算
  • 专票作废后怎样退税
  • 企业股权投资损失
  • 土地增值税清算是什么意思
  • 企业收到待清算的现金
  • 电子银行承兑汇票到期选择线上清算
  • 股权收益需要缴增值税吗
  • 建筑行业当月无收入成本如何结转?
  • 收到退回去年增值税怎么做账
  • 预提成本的会计处理
  • 劳务报酬已经缴税怎么办
  • 转账如何退还一部分钱
  • 进项税转出补交的增值税和附加税可以税前扣除吗
  • 社保费税前扣还是税后扣
  • windows7便签删除了怎么恢复
  • 电脑取消共享文件夹
  • cmd. exe 程序错误
  • 应交税金的含义
  • negro 什么意思
  • php5.4升级到php7
  • 对外支付企业所得税计税依据
  • 南奥索峰的Lac d'Ayous小屋,法国 (© Eneko Aldaz/Offset by Shutterstock)
  • 可供出售交易资产
  • thinkphp console
  • PHP isset()与empty()的使用区别详解
  • 大前端需要掌握什么技能
  • redux-tookit
  • 企业的安全费用怎么弄
  • 怎么在网上增加办税人员
  • 公务交通通讯补贴
  • 什么叫动量交易
  • 环保税的算法
  • 银行收到电子承兑怎么查
  • 收到股东投资款需要交印花税吗
  • 不动产登记机构应当履行下列职责?
  • 工程机械租赁公司注册
  • 出口收入没有及时申报怎么处罚
  • 盈余公积的提取基数
  • 发票金额跟实际金额为什么不一样
  • 发工资扣的个人社保计入哪个科目
  • 消防设备的安装
  • 建账有几种方法
  • sqlserver中delete、update中使用表别名和oracle的区别
  • Win7系统如何关闭自动更新
  • windows vista在哪里
  • windows7/vista/server(no slic)
  • Win7系统打开蓝牙
  • centos7 vncserver
  • office进程
  • 错误代码0x8007007B
  • PQIMountSvc.exe是什么进程 PQIMountSvc进程查询
  • win7电脑dns错误不能上网怎么办
  • win10系统怎么关闭病毒防护
  • freebsd连接wifi
  • datatable.load
  • awk fnr nr
  • cocos2dx开发的游戏有哪些
  • javascript unicode与GBK2312(中文)编码转换方法
  • 什么叫懒加载
  • jquery手机插件
  • node:js
  • linux cz命令
  • JAVASCRIPT IE 与 FF 中兼容写法记录
  • pythonjam怎么用
  • Button.setOnClickListener(OnClickListener l) 原理
  • jquery validate表单校验html
  • jQuery soColorPacker 网页拾色器
  • 租赁设备能抵扣个税吗
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设