前端网页打开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.mzph.cn/pingmian/49873.shtml

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

相关文章

Spring 系列

SpringBoot 实体类(Entity)层 实体类(Entity)通常属于模型层(Model Layer)或领域层(Domain Layer)。它们代表应用程序中的核心业务数据结构,与数据库表结构紧密对应。在…

springboot项目从jdk8升级为jdk17过程记录

背景:公司有升级项目jdk的规划,计划从jdk8升级到jdk11 开始 首先配置本地的java_home 参考文档:Mac环境下切换JDK版本及不同的maven-CSDN博客 将pom.xml中jdk1.8相关的版本全部改为jdk17,主要是maven编译插件之类的&#xff0c…

mysql定时备份

为什么写这篇文章 最近项目里面需要定时备份mysql的数据,网上找了下,找到了一些比较好的解决方案。但是发现有几个地方与自己不匹配,我期望有如下 备份过程不能锁表,网上很多都是会锁表备份定时任务无法执行,但是手动…

【如何在Jenkins的从节点切换NPM镜像源查看和切换】

【问题】 Jenkins打包时,前端npm构建时很慢,所有需要更换镜像源 【自查】 找到Jenkins从节点上的nodejs安装的路径,进入bin目录 执行./npm -v查看是不能正常查看, [rootlocalhost bin]# ./npm -v /usr/bin/env: ‘node’: No su…

redis 基础命令

1.数据库命令 select 库名;切换库 flushdb 清空库 flushall 清空所有库 redis支持的数据类型有很多,使用最频繁的有String 字符串类型,List队列,Hash,Zset有序集合,Set集合。 2.字符串类型命令 表示k…

【Python机器学习】k-近邻算法简单实践——电影分类

k-近邻算法(KNN)的工作原理是:存在一个样本数据集合,也被称为训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一数据与所属分类的对应关系,输入没有标签的数据后,将…

解决Java模块系统下的InaccessibleObjectException

前言 随着Java平台的演进,模块系统(Project Jigsaw)的引入为Java生态系统带来了更高级别的封装性和安全性。然而,这一进步也带来了新的挑战,特别是在处理反射和依赖于内部类实现的场景中。本文旨在深入解析java.lang.…

如何在Linux上使用Ansible自动化部署

Ansible是一个开源的自动化工具,可以帮助开发人员和系统管理员对大规模的服务器进行自动化部署和管理。它使用SSH协议来在远程服务器上执行任务,并通过模块化的方式提供了丰富的功能,可以轻松地管理服务器配置、软件部署和应用程序运行。 在…

Flink之重启策略

目录 1、固定延迟重启策略 2、失败率重启策略 3、不重启策略 在设置完 CheckPoint() 检查点机制后,不设置重启策略的话,,可以无限重启程序,那么设置的检查点机制也就没有什么意义了。因此,在生产实践中,…

android手势监听

关于作者:CSDN内容合伙人、技术专家, 从零开始做日活千万级APP。 专注于分享各领域原创系列文章 ,擅长java后端、移动开发、商业变现、人工智能等,希望大家多多支持。 未经允许不得转载 目录 一、导读二、概览三、使用四、 如何实…

昇思25天学习打卡营第17天 | CycleGAN图像风格迁移互换

通过深入学习CycleGAN模型,我对无监督图像到图像的转换技术有了更深的理解。CycleGAN不仅能在没有成对训练样本的情况下实现域之间的转换,而且在保持内容结构的同时成功转换图像风格,这在许多应用中都非常有用,如艺术风格转换、季…

面向RDF的三元组数据库

文章目录 开源RDF三元组数据库RDF4J开源RDF三元组数据库RDF-3X开源RDF三元组数据库gStore商业RDF三元组数据库Virtuoso商业RDF三元组数据库AllegroGraph商业RDF三元组数据库GraphDB商业RDF三元组数据库Blazegraph商业RDF三元组数据库Stardog由于RDF是W3C推荐的表示语义网上关联…

VAE、GAN与Transformer核心公式解析

VAE、GAN与Transformer核心公式解析 VAE、GAN与Transformer:三大深度学习模型的异同解析 【表格】VAE、GAN与Transformer的对比分析 序号对比维度VAE(变分自编码器)GAN(生成对抗网络)Transformer(变换器&…

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

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

SpringMVC 控制层框架-下

五、SpringMVC其他扩展 1. 异常处理机制 1.1 异常处理概念 开发过程中是不可避免地会出现各种异常情况,例如网络连接异常、数据格式异常、空指针异常等等。异常的出现可能导致程序的运行出现问题,甚至直接导致程序崩溃。因此,在开发过程中&a…

C++ 代码实现socket 类使用TCP/IP进行通信 (windows 系统)

C 代码实现socket 类使用TCP/IP进行通信 (windows 系统) TCP客户端通信常规步骤: 1.初始换socket环境 2.socket()创建TCP套接字。 3.connect()建立到达服务器的连接。 4.与客户端进行通信,recv()/send()接受/发送信息&#xff0…

【2024最新华为OD-C/D卷试题汇总】[支持在线评测] 小区小朋友统计(100分) - 三语言AC题解(Python/Java/Cpp)

🍭 大家好这里是清隆学长 ,一枚热爱算法的程序员 ✨ 本系列打算持续跟新华为OD-C/D卷的三语言AC题解 💻 ACM银牌🥈| 多次AK大厂笔试 | 编程一对一辅导 👏 感谢大家的订阅➕ 和 喜欢💗 🍿 最新华为OD机试D卷目录,全、新、准,题目覆盖率达 95% 以上,支持题目在线…

智能编程,一触即发:使用AIGC优化CSS——提升前端开发效率与质量

文章目录 一、AIGC在CSS优化中的应用场景智能代码生成自动布局调整性能优化建议样式和色彩建议 二、使用AIGC优化CSS的具体步骤明确需求选择AIGC工具输入描述或设计稿审查和调整集成和测试 三、AIGC优化CSS的优势与挑战优势:挑战: 《CSS创意项目实践&…

(一)延时任务篇——延时任务的几种实现方式概述

前言 延时任务是我们在项目开发中经常遇到的场景,例如订单超时30分钟自动取消,邮件5分钟后通知等等,对于这样的应用场景,我们又该如何应对呢,尤其是在微服务环境下,如何保证我们的延迟任务并发问题以及数据…

AttributeError: module ‘selenium.webdriver‘ has no attribute ‘PhantomJS‘

AttributeError: module ‘selenium.webdriver‘ has no attribute ‘PhantomJS‘ 目录 AttributeError: module ‘selenium.webdriver‘ has no attribute ‘PhantomJS‘ 【常见模块错误】 【解决方案】 欢迎来到英杰社区https://bbs.csdn.net/topics/617804998 欢迎来到我的…