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 将√取消...
【大模型RAG】拍照搜题技术架构速览:三层管道、两级检索、兜底大模型
摘要 拍照搜题系统采用“三层管道(多模态 OCR → 语义检索 → 答案渲染)、两级检索(倒排 BM25 向量 HNSW)并以大语言模型兜底”的整体框架: 多模态 OCR 层 将题目图片经过超分、去噪、倾斜校正后,分别用…...
USB Over IP专用硬件的5个特点
USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中,从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备(如专用硬件设备),从而消除了直接物理连接的需要。USB over IP的…...
华为OD机试-最短木板长度-二分法(A卷,100分)
此题是一个最大化最小值的典型例题, 因为搜索范围是有界的,上界最大木板长度补充的全部木料长度,下界最小木板长度; 即left0,right10^6; 我们可以设置一个候选值x(mid),将木板的长度全部都补充到x,如果成功…...
【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统
Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...
Linux入门课的思维导图
耗时两周,终于把慕课网上的Linux的基础入门课实操、总结完了! 第一次以Blog的形式做学习记录,过程很有意思,但也很耗时。 课程时长5h,涉及到很多专有名词,要去逐个查找,以前接触过的概念因为时…...
本地部署drawDB结合内网穿透技术实现数据库远程管控方案
文章目录 前言1. Windows本地部署DrawDB2. 安装Cpolar内网穿透3. 实现公网访问DrawDB4. 固定DrawDB公网地址 前言 在数字化浪潮席卷全球的背景下,数据治理能力正日益成为构建现代企业核心竞争力的关键因素。无论是全球500强企业的数据中枢系统,还是初创…...
AGV|无人叉车工业语音播报器|预警提示器LBE-LEX系列性能与接线说明
LBE-LEX系列AGV|无人叉车工业语音播报器|预警提示器,涵盖LBE-LEI-M-00、LBE-LESM-00、LBE-LES-M-01、LBE-LEC-M-00、LBE-KEI-M-00、LBE-KES-M-00、LBE-KES-M-01、LBE-KEC-M-00等型号,适用于各种需要语音提示的场景,主要有AGV、AMR机器人、无人…...
NamedParameterJdbcTemplate 使用方法及介绍
NamedParameterJdbcTemplate是 Spring 框架中用于数据库操作的核心类之一,它拓展了JdbcTemplate,通过封装实现命名参数特性,相比传统占位符?,命名参数可读性和维护性更强,能有效避免参数顺序混淆问题。 一、核心支持…...
上位机知识篇---Flask框架实现Web服务
本文将简单介绍Web 服务与前端显示部分,它们基于Flask 框架和HTML/CSS/JavaScript实现,主要负责将实时视频流和检测结果通过网页展示,并提供交互式状态监控。以下是详细技术解析: 一、Flask Web 服务架构 1. 核心路由设计 app.…...
c++ decltype关键字
decltype为类型推导关键字。 示例代码: // decltype也可用于函数模板编程: template<typename T, typename U> auto add(T t, U u) -> decltype(t u) {return t u; }// decltype推导函数返回类型 auto doubleNumFunc(int x) -> decltype(x * 2) {ret…...
