前端网页打开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,一经查实,立即删除!

相关文章

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)的工作原理是:存在一个样本数据集合,也被称为训练样本集,并且样本集中每个数据都存在标签,即我们知道样本集中每一数据与所属分类的对应关系,输入没有标签的数据后,将…

Flink之重启策略

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

android手势监听

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

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

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

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…

【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创意项目实践&…

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 欢迎来到我的…

数据结构初阶 · 二叉搜索树

目录 前言: 二叉搜索树的实现 二叉搜索树的基本结构 增 查 中序遍历 删 前言: 在最初学习二叉树的时候,就提及到过单独用树来存储数据是既不如链表也不如顺序表的,二叉树的用处可以用来排序,比如堆排序,也可以用来搜索数据…

java-数据结构与算法-02-数据结构-05-栈

文章目录 1. 栈1. 概述2. 链表实现3. 数组实现4. 应用 2. 习题E01. 有效的括号-Leetcode 20E02. 后缀表达式求值-Leetcode 120E03. 中缀表达式转后缀E04. 双栈模拟队列-Leetcode 232E05. 单队列模拟栈-Leetcode 225 1. 栈 1. 概述 计算机科学中,stack 是一种线性的…

netty入门-3 EventLoop和EventLoopGroup,简单的服务器实现

文章目录 EventLoop和EventLoopGroup服务器与客户端基本使用增加非NIO工人NioEventLoop 处理普通任务与定时任务 结语 EventLoop和EventLoopGroup 二者大概是什么这里不再赘述,前一篇已简述过。 不理解也没关系。 下面会简单使用,看了就能明白是什么 这…

第124天:内网安全-代理 Sockets协议路由不出网后渗透通讯CS-MSF 控制上线

目录 思维导图 环境配置 案例一:网络通讯&控制上线--CS-路由添加&节点建立&协议生成&正反连接 案例二:网络通讯&控制上线--MSF-路由添加&节点建立&协议生成&正反连接 思维导图 环境配置 这里由于系统内存问题我只设…

Python的人脸识别程序

1.录入人脸,输入ID号 haarcascade_frontalface_default.xml # 导入模块 import os import numpy as np import cv2 as cv import cv2face_detector cv2.CascadeClassifier(rD:\Automation_All_Files\OCR\haarcascade_frontalface_default.xml) # 待更改# 为即将…

Windows10+vs 2017中创建WEB API教程

我们如果需要用到web api怎么办?一般来说可以自己开发和去使用别人开发好的api,今天我们来讲一下Windows10vs 2017中创建web Api的教程。目前本教程当中的方法在Win10 VS2017(MVC5)win server2016vs2017,vs2013 vs201…