前端网页打开PC端本地的应用程序实现方案

最近开发有一个需求,网页端有个入口需要跳转三维大屏,而这个大屏是一个exe应用程序。产品需要点击这个入口,并打开这个应用程序。这个就类似于百度网盘网页跳转到PC端应用程序中。

这里我们采用添加自定义协议的方式打开该应用程序。一开始可以查看该程序是否存在注册表中。注册表是Microsoft Windows中的一个重要的数据库,用于存储系统和应用程序的设置信息。我们可以通过注册表来定义打开软件的协议。

我们先可以打开注册表查看是否存在该程序的协议。

快捷键 win+R,并输入regedit

展开 HKEY_CLASSES_ROOT,查看是否存在

如果不存在的话那我们就要自定义该协议,下面是协议的一些配置信息,红框是该程序保存的路径,注意路径不能含有中文

首先我们先创建一个txt文档

我们还需要定义协议名称

以下是代码,方便复制

Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\SZWSqure]
"URL Protocol"="E:\\work_projects\\HR\\SZWSquare20240710\\SZWSqure.exe"
@="SZWSqure"[HKEY_CLASSES_ROOT\SZWSqure\DefaultIcon]
@="E:\\work_projects\\HR\\SZWSquare20240710\\SZWSqure.exe,1"[HKEY_CLASSES_ROOT\SZWSqure\shell][HKEY_CLASSES_ROOT\SZWSqure\shell\open][HKEY_CLASSES_ROOT\SZWSqure\shell\open\command]
@="\"E:\\work_projects\\HR\\SZWSquare20240710\\SZWSqure.exe\"\"%1\""

编辑好这个文档后,将.txt改为.reg后缀,双击运行,点击是

添加成功

可以看到我们刚刚的协议已经添加到了注册表

最后我们需要编写前端代码,定义一个打开程序的函数

export function openUrlWithInputTimeoutHack(url, failCb, successCb) {let target = document.createElement('input')target.style.width = '0'target.style.height = '0'target.style.position = 'fixed'target.style.top = '0'target.style.left = '0'document.body.appendChild(target)target.focus();var handler = _registerEvent(target, "blur", onBlur);console.log('focus')function onBlur() {console.log('blur')successCb && successCb()handler.remove()clearTimeout(timeout)document.body.removeChild(target)};//will trigger onblurlocation.href = url// Note: timeout could vary as per the browser version, have a higher valuevar timeout = setTimeout(function () {console.log('setTimeout')failCb && failCb()handler.remove()document.body.removeChild(target)}, 1000);
}function _registerEvent(target, eventType, cb) {if (target.addEventListener) {target.addEventListener(eventType, cb);return {remove: function () {target.removeEventListener(eventType, cb);}};} else {target.attachEvent(eventType, cb);return {remove: function () {target.detachEvent(eventType, cb);}};}
}

调用该方法,打开应用程序,第一个参数是刚刚我们定义的协议名,第二个参数是失败回调的函数,第三个参数是成功回调的函数

至此,我们可以通过js打开本地的应用程序。

参考的博客:

点击vue页面链接打开本地exe文件_网页如何打开 客户端 exe vue-CSDN博客

VUE项目判断电脑是否安装某应用程序,安装则唤起,未安装则跳转下载页面_vue验证cs系统的客户端软件是不是打开了-CSDN博客

https://juejin.cn/post/6844903989155217421?searchId=20240724095902CC188086AFD5CC2138AC#heading-11

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/383463.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

吴恩达深度学习笔记1 Neural Networks and Deep Learning

参考视频:(超爽中英!) 2024公认最好的【吴恩达深度学习】教程!附课件代码 Professionalization of Deep Learning_哔哩哔哩_bilibili Neural Networks and Deep Learning 1. 深度学习引言(Introduction to Deep Learning) 2. 神 经 网 络 的 编 程 基 础…

大型语言模型的生物医学知识图优化提示生成

大型语言模型的生物医学知识图优化提示生成 https://arxiv.org/abs/2311.17330 https://github.com/BaranziniLab/KG_RAG 大型语言模型的生物医学知识图优化提示生成 摘要 KG-RAG框架,较好的结合了生物医学知识图谱SPOKE和LLM的优势。SPOKE是一个开放知识图谱&…

【云原生】Kubernetes中的DaemonSet介绍、原理、用法及实战应用案例分析

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,…

59、mysql存储过程

存储过程 一、存储过程: 1.1、存储过程的概念 概念:完成特定功能的sql语句的集合。把定义好的sql集合在一个特定的sql的函数当中 每次执行调用函数即可。还可以实现传参的调用。 1.2、存储过程的语法: delimiter $$ ##delimiter开始和结…

Visual Studio 2022新建 cmake 工程测试 tensorRT 自带样例 sampleOnnxMNIST

1. 新建 cmake 工程 vs2022_cmake_sampleOnnxMNIST_test( 如何新建 cmake 工程,请参考博客:Visual Studio 2022新建 cmake 工程测试 opencv helloworld ) 2. 删除默认生成的 vs2022_cmake_sampleOnnxMNIST_test.h 头文件 3. 修改默认生成的 vs2022_cma…

Docker简单快速入门

1. 安装Docker 基于 Ubuntu 24.04 LTS 安装Docker 。 # 更新包索引并安装依赖包 sudo apt-get update sudo apt-get install -y apt-transport-https ca-certificates curl software-properties-common# 添加Docker的官方GPG密钥并存储在正确的位置 curl -fsSL https://mirror…

叮!2024 龙蜥操作系统大会议题征集正式启动

定啦!2024 龙蜥操作系统大会(OpenAnolis Conference,以下简称“龙蜥大会”)将于 2024 年 8 月 30 日在北京中关村国家自主创新示范区会议中心盛大召开。 2024 龙蜥大会由中关村科学城管委会、海淀区委网信办、中国开源软件推进联…

Python从0到100(四十三):数据库与Django ORM 精讲

前言: 零基础学Python:Python从0到100最新最全教程。 想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Pyth…

Arduino学习笔记1——IDE安装与起步

一、IDE安装 去浏览器直接搜索Arduino官网,点击Software栏进入下载界面,选择Windows操作系统: 新版IDE下载不需要提前勾选所下载的拓展包,下载好后直接点击安装即可。 安装好后打开Arduino IDE,会自动开始下载所需的…

World of Warcraft [CLASSIC] Timebadge

游戏币【每个服务器实时金价不一样,本例子是5000-6000金】 1枚【魔兽世界时光徽章】 30天游戏时间。 5760金币游戏币,策划如何消耗游戏里面的金币总量,以及如何留住那些非人民币玩家呢 30天加上去了 World of Warcraft [CLASSIC] [魔兽世界…

怎么使用动态IP地址上网

如何设置动态IP地址上网? 设置动态IP地址上网的步骤如下: 一、了解动态IP地址 动态IP地址是由网络服务提供商(ISP)动态分配给用户的IP地址,它会根据用户的需求和网络情况实时改变。相比于静态IP地址,动态…

使用VuePress-Reco快速搭建博客(保姆级)

简介:VuePress-Reco 一款简洁的 vuepress 博客 & 文档 主题,可以自由搭建自己的风格,比较方便简洁。 链接:vuepress-reco 准备环境: Node.Js >20.5.0,Npm > 10.8.2 OR Yarn > 1.22.19 注&am…

七、SpringBoot日志

1. 得到日志对象 import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.springframework.stereotype.Controller; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; //打印日志…

【Django】django模板与前端技术(html模板)

文章目录 “python包html”还是“html包python”?1.新建模板2.模板语法3.views.py测试 “python包html”还是“html包python”? 在前端页面中html代码比python多得多,所以一定是html包python最优!于是引出今天的模板。 大体分为三个步骤:…

独立站外链如何影响搜索引擎排名?

独立站的外链对搜索引擎排名有着非常重要的影响。简单来说,外链就像是别的网站对你的网站投的信任票。每一条外链都告诉搜索引擎:“这个网站的内容是有价值的,值得推荐。”因此,外链的数量和质量直接影响你的网站在搜索引擎中的排…

Lc60---1189. “气球” 的最大数量(排序)---Java版

1.题目 2.思路 (1)用字典的方法,ballon,这个单词里面每个字母,需要的个数 (2)再创一个字典的方法统计,输入的字符串的字母的个数 (3)计算能拼凑出多少个“ballon" (4)代码解释 for (char c : text.toCharArray()) {count.put(c, count.getOrDefau…

vue3编程-import.meta.glob实现动态路由(菜单)

import.meta.glob 是vite提供的批量懒加载组件的方法 本地开发环境: const modules import.meta.glob(../views/**/*.vue)这段代码返回的modules是一个Map: key是vue文件的相对路径,值是一个函数,将函数打印出来,如…

Python鲁汶意外莱顿复杂图拓扑分解算法

🎯要点 🎯算法池化和最佳分区搜索:🖊网格搜索 | 🖊发现算法池 | 🖊返回指定图的最佳划分 | 🖊返回指定图的最佳分区 | 🎯适应度和聚类比较功能:🖊图的划分 |…

Python3网络爬虫开发实战(1)爬虫基础

一、URL 基础 URL也就是网络资源地址,其满足如下格式规范 scheme://[username:password]hostname[:port][/path][;parameters][?query][#fragment] scheme:协议,常用的协议有 Http,https,ftp等等;usern…

构建高效园区导览系统:基于3DGIS与物联网技术的实现方案

园区导航的挑战与机遇 在现代化的大型园区中,随着面积的不断扩张和布局的日益复杂,传统的纸质地图已难以满足日益增长的导航需求。每栋楼、每层楼都有着不同的办公室,不同的业务。这种低效的寻路过程不仅影响了客户的来访体验,也…