Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案
一、需求分析
最近做的一个用H5加原生开发的html项目,现需要集成到Vue2.0项目里面来。遇到的相关问题做个记录和总结,以便能帮到大家避免踩坑。
二、问题记录
1、页面空白问题
将html页面通过iframe的方式嵌入进来之后,发现页面是空白的,不显示任何元素,
通过搜索资料发现,把html页面放到public目录下面的static目录下能够显示


不写static目录直接访问会报错
2、vue和html页面之间如何通信
首先通过window对象 绑定一个方法 去调用vue声明的方法
格式为:window[‘方法名’] = (参数)=>{ vue里面的 你需要在html页面里调用的方法 }

下面是贴的相关代码 三个方法
methods: {// 调用方法iframeLoad() {const iframe = document.querySelector('#iframe')this.loading = trueconst that = this// 兼容处理if (iframe.attachEvent) {// IEiframe.attachEvent('onload', () => {that.loading = false})} else {// 非IEiframe.onload = () => {that.loading = false}}},//查询机组下拉列表listSystemQuery(){listSystem().then((response) => {this.selectData = response.rows || [] //机组下拉列表this.sendMessage(1)}).catch((error)=>{console.log(error)})},//查询所选机组下的查询参数listParamsQuery(param){const value = param.valueconst number = param.numgetSystemResult(value).then((response) => {this.paramsData = response.data || [] //所选机组参数this.sendMessage(2,number)}).catch((error)=>{console.log(error)})},//点击查询按钮获取对标分析数据dbfxQueryData(param){const params = {id: param.id,startTime: param.startTime, //开始时间endTime: param.endTime, //结束时间queryParams: param.queryParams,timeParam: param.timeParam,//页面录入 持续时间秒}const num = param.numgetSystemData(params).then((response) => {this.resultData = response.data || [] //所选机组参数this.sendMessage(3,num)}).catch((error)=>{console.log(error)})},sendMessage(num,num2){const iframeWindow = document.querySelector('#iframe').contentWindowif(num===1){iframeWindow.postMessage({cmd: 'selectData',params: {success: true,data: this.selectData,}},'*') // 发送消息至html页面}else if(num ===2){iframeWindow.postMessage({cmd: 'paramsData',params: {success: true,data: this.paramsData,num:num2}},'*') // 发送消息至html页面}else if(num ===3){iframeWindow.postMessage({cmd: 'resultData',params: {success: true,data: this.resultData,num:num2}},'*') // 发送消息至html页面}},}
在vue绑定方法之后 那么如何在html去调用这个方法呢
通过window.parent['vue里面绑定的名称'](需要传递的参数) 可以定义一个对象来传参 这种方法就可以调用到vue里面的方法啦!

//调用vue方法const param ={value:selectValue,num:num}window.parent['queryParamsData'](param)
如下 html调用的是这个方法

param可以接收到来取值
html调用vue现在可以拿到数据啦 那么该如何回传到html页面上来使用呢 看下面!

首先拿到iframe的contentWindow对象,通过这个对象 postMessage 就可以发送消息给到html页面

html页面接收时是通过message统一接收的,针对发送多个消息的情况下, 我们这里做下区分,
通过传递不同的参数作为标识来区分是那个接口来发送的消息

html页面同样也要根据传递过来不同的参数 去调整自己的逻辑,首先知道html是如何接收到vue传来的消息的,window监听message即可接收postMessage发送来的消息
再通过传参的不同就可以区分处理逻辑啦

3、iframe延迟加载提升用户体验
如果不加加载效果,会导致dom元素渲染的很慢,体验感很差,这里通过antdesign的spin渲染组件来搞定它

那么问题来了,什么情况下知道iframe渲染完了呢,看下面

iframe对象attachEvent事件可以知道是否已加载完成,再去给他关闭loading即可
相关文章:
Vue2嵌入HTML页面空白、互相传参、延迟加载等问题解决方案
一、需求分析 最近做的一个用H5加原生开发的html项目,现需要集成到Vue2.0项目里面来。遇到的相关问题做个记录和总结,以便能帮到大家避免踩坑。 二、问题记录 1、页面空白问题 将html页面通过iframe的方式嵌入进来之后,发现页面是空白的&am…...
目标检测中的IOU
IOU 什么是IOU?IOU应用场景写代码调试什么是IOU? 简单来说IOU就是用来度量目标检测中预测框与真实框的重叠程度。在图像分类中,有一个明确的指标准确率来衡量模型分类模型的好坏。其公式为: 这个公式显然不适合在在目标检测中使用。我们知道目标检测中都是用一个矩形框住…...
微信小程序实现双向滑动快捷选择价格(价格区间)
实现样子 提示:效果可以自己自定义,自己将文字样式更改为自己项目属性即可 实现达到方法 1、左边为最低价,右边为最高价格,可以拖动左边最低价选择价格。拖动右边为最高价。 2、当两个价格重合时,继续拖动࿰…...
W5500-EVB-PICO 做TCP Server进行回环测试(六)
前言 上一章我们用W5500-EVB-PICO开发板做TCP 客户端连接服务器进行数据回环测试,那么本章将用开发板做TCP服务器来进行数据回环测试。 TCP是什么?什么是TCP Server?能干什么? TCP (Transmission Control Protocol) 是一种面向连…...
Flowise AI:用于构建LLM流的拖放UI
推荐:使用NSDT场景编辑器助你快速搭建可二次编辑的3D应用场景 什么是Flowise AI? Flowise AI是一个开源的UI可视化工具,用于帮助开发LangChain应用程序。在我们详细介绍 Flowise AI 之前,让我们快速定义 LangChain。LangChain是…...
Vue原理解析:Vue到底是什么?
Vue.js是一种流行的JavaScript框架,用于构建用户界面。它采用了MVVM(Model-View-ViewModel)架构模式,旨在简化Web应用程序的开发过程。Vue具有响应式的数据绑定和组件化的特性,使得开发者能够以声明式的方式构建可复用…...
Playwright 和 Selenium 的区别是什么?
前言 最近有不少同学问到 Playwright 和 Selenium 的区别是什么? 有同学可能之前学过 selenium 了,再学一个 playwright 感觉有些多余,可能之前有项目已经是 selenium 写的了,换成 playwright 需要时间成本,并且可能有…...
【面试题】前端面试十五问
前端面试题库 (面试必备) 推荐:★★★★★ 地址:前端面试题库 数组去重 遍历旧数组,然后拿着旧数组元素去查询新数组,如果该元素在新数组里面没有出现过,我们就添加,否…...
09-1_Qt 5.9 C++开发指南_Qchart概述
Qt Charts 可以很方便地绘制常见的折线图、柱状图、饼图等图表,不用自己耗费时间和精力开发绘图组件或使用第三方组件了。 本章首先介绍 Qt Charts 的基本特点和功能,以画折线图为例详细说明 Qt Charts 各主要部件的操作方法,再介绍各种常用…...
烘焙光照贴图,模型小部分发黑
1.首先确定创建了光照贴图UV,其次确定不是溢色,这个最简单,所有模型材质设置为双面就可以,URP材质球的话这里就是设置双面 在scence界面Texel Validity模式里查看溢色,红色表示有溢色,绿色表示正常 2. 光照…...
gitblit windows部署
1.官网下载 往死慢,我是从百度找的1.9.1,几乎就是最新版 http://www.gitblit.com/ 2.解压 下载下来是一个zip压缩包,直接解压即可 3.配置 3.1.配置资源库路径 找到data文件下的gitblit.properties文件,用Notepad打开 **注意路…...
opencv基础53-图像轮廓06-判断像素点与轮廓的关系(轮廓内,轮廓上,轮廓外)cv2.pointPolygonTest()
点到轮廓的距离 在 OpenCV 中,函数 cv2.pointPolygonTest()被用来计算点到多边形(轮廓)的最短距离(也 就是垂线距离),这个计算过程又称点和多边形的关系测试。该函数的语法格式为: retval cv2…...
【LeetCode每日一题】——575.分糖果
文章目录 一【题目类别】二【题目难度】三【题目编号】四【题目描述】五【题目示例】六【题目提示】七【解题思路】八【时间频度】九【代码实现】十【提交结果】 一【题目类别】 哈希表 二【题目难度】 简单 三【题目编号】 575.分糖果 四【题目描述】 Alice 有 n 枚糖&…...
添加水印图片的java代码
文章目录 添加依赖java代码demo 添加依赖 <dependency><groupId>com.github.jai-imageio</groupId><artifactId>jai-imageio-core</artifactId><version>1.4.0</version></dependency>java代码demo package com.zkj.report.c…...
uniapp创建项目入门【详细】
大家在学习vue和微信小程序之后,就可以开始来学习uniapp了,在uniapp中,一套代码可以跨越所有的平台,可以很方便的维护。接下来我们先来学习如何创建uinapp的项目 一、uniapp的创建需求 大家只要会vue和微信小程序的基础来学习unia…...
pytest功能特性介绍
前言 学pytest就不得不说fixture,fixture是pytest的精髓所在,就像unittest中的setup和teardown一样,如果不学fixture那么使用pytest和使用unittest是没什么区别的(个人理解)。 fixture用途 1.做测试前后的初始化设置,如测试数据…...
UIE在实体识别和关系抽取上的实践
近期有做信息抽取的需求,UIE在信息抽取方面效果不错。 模型准备 huggingface上下载UIE模型:PaddlePaddle/uie-base Hugging Face 点击“Clone Repository”,确定git clone的链接 其中包含大文件,需要在windows安装git-lfs,在https://git-lfs.com/下载git-lfs,安装。…...
Baklib: 逆袭语雀的在线帮助中心,知识库管理工具
1. 介绍 在现代的技术发展中,知识管理变得越来越重要。特别是对于企业来说,拥有一个高效的知识库管理工具可以极大地提高工作效率和团队合作。Baklib就是这样一款在线帮助中心和知识库管理工具,它可以帮助企业集中管理和共享知识,…...
web 3d场景构建+three.js+室内围墙,仓库,楼梯,货架模型等,第一人称进入场景案例
翻到了之前的一个案例,基于three.js做的仓库布局模拟,地图元素除了大模型外,其他都是通过JSON数据解析动态生成的,例如墙体,柱子门口,地标等,集成了第一人称的插件可以第一人称进入场景有需要的…...
EditPlus取消自动.bak备份
Tools->Preferences->File 将√取消...
IDEA运行Tomcat出现乱码问题解决汇总
最近正值期末周,有很多同学在写期末Java web作业时,运行tomcat出现乱码问题,经过多次解决与研究,我做了如下整理: 原因: IDEA本身编码与tomcat的编码与Windows编码不同导致,Windows 系统控制台…...
RocketMQ延迟消息机制
两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数,对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后…...
基于距离变化能量开销动态调整的WSN低功耗拓扑控制开销算法matlab仿真
目录 1.程序功能描述 2.测试软件版本以及运行结果展示 3.核心程序 4.算法仿真参数 5.算法理论概述 6.参考文献 7.完整程序 1.程序功能描述 通过动态调整节点通信的能量开销,平衡网络负载,延长WSN生命周期。具体通过建立基于距离的能量消耗模型&am…...
智慧工地云平台源码,基于微服务架构+Java+Spring Cloud +UniApp +MySql
智慧工地管理云平台系统,智慧工地全套源码,java版智慧工地源码,支持PC端、大屏端、移动端。 智慧工地聚焦建筑行业的市场需求,提供“平台网络终端”的整体解决方案,提供劳务管理、视频管理、智能监测、绿色施工、安全管…...
Redis相关知识总结(缓存雪崩,缓存穿透,缓存击穿,Redis实现分布式锁,如何保持数据库和缓存一致)
文章目录 1.什么是Redis?2.为什么要使用redis作为mysql的缓存?3.什么是缓存雪崩、缓存穿透、缓存击穿?3.1缓存雪崩3.1.1 大量缓存同时过期3.1.2 Redis宕机 3.2 缓存击穿3.3 缓存穿透3.4 总结 4. 数据库和缓存如何保持一致性5. Redis实现分布式…...
Vue3 + Element Plus + TypeScript中el-transfer穿梭框组件使用详解及示例
使用详解 Element Plus 的 el-transfer 组件是一个强大的穿梭框组件,常用于在两个集合之间进行数据转移,如权限分配、数据选择等场景。下面我将详细介绍其用法并提供一个完整示例。 核心特性与用法 基本属性 v-model:绑定右侧列表的值&…...
C++ 基础特性深度解析
目录 引言 一、命名空间(namespace) C 中的命名空间 与 C 语言的对比 二、缺省参数 C 中的缺省参数 与 C 语言的对比 三、引用(reference) C 中的引用 与 C 语言的对比 四、inline(内联函数…...
QT: `long long` 类型转换为 `QString` 2025.6.5
在 Qt 中,将 long long 类型转换为 QString 可以通过以下两种常用方法实现: 方法 1:使用 QString::number() 直接调用 QString 的静态方法 number(),将数值转换为字符串: long long value 1234567890123456789LL; …...
OpenLayers 分屏对比(地图联动)
注:当前使用的是 ol 5.3.0 版本,天地图使用的key请到天地图官网申请,并替换为自己的key 地图分屏对比在WebGIS开发中是很常见的功能,和卷帘图层不一样的是,分屏对比是在各个地图中添加相同或者不同的图层进行对比查看。…...
全志A40i android7.1 调试信息打印串口由uart0改为uart3
一,概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本:2014.07; Kernel版本:Linux-3.10; 二,Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01),并让boo…...
