我们有遇到可以直接打开QQ的跳转链接，也有遇到过直接启动office打开文档。

具体是如何操作的呢？

添加注册表项

首先需要在注册表中添加应用软件的启动地址，操作方式如下

在HKEY_CLASSES_ROOT下，新建JiraUserQuestion及其子节点：

然后，在JiraUserQuestion中，添加URL Protocol = "C:\Program Files (x86)\JiraUserQuestion\JiraUserQuestion.exe"。

- 这里是定义Protocol，后续通过protocol的检测协议，能访问应用地本地路径

在下方节点，command项中添加默认项。可以通过传入参数，启动应用

Js添加访问应用链接

添加前端demo：

 1 <!DOCTYPE html>

 2 <html>

 3 <head lang="en">

 4     <meta charset="UTF-8">

 5     <title>Custom Protocol Demo</title>

 6 </head>

 7 <body>

 8     <h1>Click:</h1>

 9     <a href="JiraUserQuestion://Open">Open JiraUserQuestion</a>

10     <script src="protocolcheck.js"></script>

11 </body>

12 </html>

protocolcheck.js文件，即protocol协议js，可从网上直接下载。

下载后，将文件放在html文件同一级，方便引用。

点击链接，效果如下：

检测本地是否存在应用

上面的protocolcheck.js文件，已封装了对url判断、加载的逻辑。

如果存在应用，则打开应用；否则有相应的回调可以选择处理事务。

1     <script>

2         //测试本地应用是否存在

3         let protocalUrl = `JiraUserQuestion://open`

4         protocolCheck(protocalUrl, () => {

5             alert('检测到，未安装客户端')

6         }, () => {

7             alert('检测到：已安装了客户端')

8         })

9     </script>

如果还想了解详细，可以下载我的Demo查看

参考列表：

StackOverFlow解决方案：  https://stackoverflow.com/questions/27489665/approaches-of-detection-of-custom-protocol-in-chrome-and-safari-browsers

Custom Protocol Detection in Browser源码:   https://github.com/ismailhabib/custom-protocol-detection

Native-App-Protocal-Detection源码地址：https://github.com/evanxuhe/Native-App-Protocal-Detection

js检测客户端是否安装：htps://www.cnblogs.com/damonFeng/p/12095558.html

JS 打开本地应用软件的更多相关文章

  1. html JS 打开本地程序及文件

    在网页打开本地应用程序示例: 一.在本地注册表自定义协议:以自定义调用Viso为例 1.在HKEY_CLASSES_ROOT下添加项ZVISIO. 2.修改ZVISIO项下的"(默认)&qu ...

  2. js 判断是否可以打开本地软件

    js判断时候可以打开本地的软件或者插件 点击一个按钮,打开本地的软件,比如问题反馈,需要调起本地的邮箱,填入一些信息. 这个功能<a>标签有提供支持,但是如果本地没有安装邮箱,则无法打开, ...

  3. js调用本地office打开服务器的office文件预览

    本来是想做成直接在网页上在线预览office文件的,但是找了好多,要不是收费,要不就是要调用别人的API不安全,所以纠结了好久还是用调用本地的office预览office文件. 废话不多说,那么怎么调 ...

  4. 实现HTML调用打开本地软件文件

    有时候我们想要实现一个功能,就是在HTML页面点击一个链接就能调用打开本地可执行文件.就像腾讯QQ.迅雷这种. 而实现这种功能其实也很简单,就是需要我们添加修改注册表,实现自定义URL Protoco ...

  5. 使用JS启动本地应用程序、屏幕键盘

    问题描述:     现在希望在Web端使用JS调用本地应用程序 问题解决:   (1)使用JS启动本地应用程序 使用上述代码重点是创建了一个ActiveXObject的对象     参考说明:     ...

  6. 【Electron】Electron开发入门（七）：打开本地文件或者网页链接 and webview里操纵electron api

    1.打开本地文件或者网页链接 // 打开系统本地文件 const {shell} = require('electron'); // Open a local file in the default ...

  7. 移动浏览器H5页面通过scheme打开本地应用

    在移动端浏览器H5页面中,点击按钮打开本地应用主要通过 scheme 协议.本文主要介绍如何在浏览器H5页面中通过 scheme 协议打开本地应用. scheme协议定义 scheme 是一种页面之间 ...

  8. MyWebViewDemo【封装Webview常用配置和选择文件、打开相机、录音、打开本地相册的用法】

    版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言 封装webview的常用配置和选择文件.打开相机.录音.打开本地相册的用法.[如果想要使用简单的预览功能,可以参考<MyBri ...

  9. 京东在html5页面中打开本地app的解决方案

    转:https://blog.csdn.net/CameloHuang/article/details/64476385 从html5打开本地的app–如果本地没有app就跳转到下载页面,大家都会认为 ...

  10. 给你的移动网站加点料：推荐下载App，如果本地安装则直接打开本地App（Android/IOS）

    纵观现在每家移动网站,打开首页的时候,都有各种各样的形式来提示你下载自身的移动App(Android/IOS),这是做移动客户端产品的一个很好地引流的手段.当然各家引流下载的交互和视觉各不相同,有的是 ...

随机推荐

  1. centos7 启动Tomcat7时报错：The APR based Apache Tomcat Native library which allows optimal performance in production environments was not found

    INFO: The APR based Apache Tomcat Native library which allows optimal performance in production envi ...

  2. 生产环境实现Docker部署宝塔面板

    生产环境中,为了避免极小概率的数据丢失,我们将容器内的宝塔文件映射到宿主机的目录中(您之后安装的 Nginx.MySQL 等服务均会挂载到宿主机目录).该方法是 Docker 部署宝塔面板的最优方案, ...

  3. @Value属性值读取

    1.在父类定义属性DQ,并通过配置初始化 @Configuration public class DQConfig { public static String DQ; @Value("${ ...

  4. 记一个快捷在线接口YAPI

    在线地址:http://192.168.252.152:3000 1.idea中file下setting中plugins搜索并加载插件YAPI 2.idea中的.idea中.misc.xml文件配置. ...

  5. group by和union，Laravel分页

    $res3 = DB::table('users') ->join('user_folow_boutiques', 'user_folow_boutiques.user_id', '=', 'u ...

  6. 关于前端JS的一些常用方法和知识

    关于前端数据存储目前只解释有三种:cookie.localStorage.sessionStorage cookie解释:只针对当前session(会话)有效,关闭标签页即失效使用: 1 var ck ...

  7. uni-popup 遮不住头部标题的解决办法

    要做一个小程序,会有弹窗,但是uni-app的API组件uni.showModal不足以满足我的需求,于是我用HBuilderX引入了uni-popup. 代码是这样的 <button @cli ...

  8. Java-02对象传递和返回

    Java-02对象传递和返回 当你在"传递"一个对象的时候,你实际上是在传递它的引用 1引用 1.1传递引用 当你将一个引用传给方法后,该引用指向的仍然是原来的对象: /** * ...

  9. 解决docker容器不足问题

    df -h查看容量,看看那个被占满了,之前我这里是100% 用了一下docker system prune,发现没啥用,又加了-a:docker system prune -a,就又空间了. 之后再进 ...

  10. 《golong入门教程📚》，从零开始入门❤️（建议收藏⭐️）

    Go语言学习笔记 本菜鸟的Go语言学习笔记,历时1个月,包含了Go语言大部分的基本语法(不敢说全部),学习期间参考了各种视频,阅读了各种文章,主要参考名单如下: 点击跳转到参考名单<(￣︶￣)& ...