pc前端js调起电脑本地应用程序(需要客户端配合自定义URL Protocol 协议 )

希文Gershwin

已于 2022-05-24 22:20:21 修改

阅读量9.5k

点赞数 5

分类专栏： JS 文章标签： vue javascript

于 2020-06-01 22:54:31 首次发布

本文链接：https://blog.csdn.net/weixin_44309374/article/details/106481914

版权

JS 专栏收录该内容

13 篇文章

订阅专栏

由于做项目需要实现如题的一个功能，所以搜寻了相关资料。

CSDN博文自定义URL Protocol(客户端的配置)：自定义URL Protocol 协议_chinahaerbin的博客-CSDN博客_自定义url协议

项目地址：GitHub - li1164267803/pc-call-up-client: pc端js唤醒客户端软件-有本软件打开，没有时去下载
包含html和在vue中的使用方法

如果觉得对您有用，不忘记了给个 star

前端的工作

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js调起pc客户端</title>
</head>
<body>
    <button id="openApp">openApp</button>
    <script>
        function callapp_PC({ url, callback }) {
            var t = setTimeout(callback, 1000);
            var inp = document.createElement("input");
            inp.style.position = "absolute";
            inp.style.clip = "rect(0, 0, 0, 0)";
            // 出现下载框的时候往下跳的问题
            inp.style.top = '0'
            inp.style.left = '0'
            function blur() {
                window.clearTimeout(t);
            }
            inp.addEventListener("blur", blur); // 监听blur事件
            document.body.appendChild(inp);
            inp.focus(); // 获取焦点
            setTimeout(function() { // 删除无用的标签
                inp.removeEventListener("blur", blur);
                document.body.removeChild(inp);
            }, 1000);
            //有客户端 如果有本地exe应用，就会弹框，input失去焦点，然后执行blur()事件 清空t定时器 - 删除无用的标签定时器
            //无客户端 不会弹框，input也不会失去焦点 触发t定时器- 执行callback - 删除无用的标签定时器
            location.href = url;
        }

        document.getElementById("openApp").onclick = function(e) {
            callapp_PC({
                // 这个url地址换成需要唤醒的客户端的URL Protoco
                // 客户端自定义URL Protoco的设置请看我的博客 pc前端js调起电脑本地应用程序(需要客户端配合 自定义URL Protocol 协议 )
                url: "baijiacloud://urlpath=https%3A%2F%2Fb41568785.at.baijiayun.com",
                callback: function() {
                    console.log("唤醒失败了,做一些唤醒失败后的操作吧");
                }
            });
        };
    </script>
</body>
</html>

客户端开发的工作：

自定义URL Protocol 协议

一些应用软件可以在浏览器中点击一个url后自动启动，并执行操作。这是咋实现的呢？
我在 google了许多也找个博客说明。接照这些文档我也新手试了一下。

通过网站调用可执行程序，主要是修改注册表,注册 URL Protocol 协议。

第一步：按照如下图所示建立注册表

其中在注册表的 [HKEY_CLASSES_ROOT] 主键下建立[qiaoker]建。
[qiaoker] 此键可以自定义任意。

第二步：注册表中建立相关键值对。

注意到上面 command 项的值为 C:\Program Files (x86)\Qiaoker\updater.exe "%1" ,这个"%1"是传递给 updater.exe的参数。
使用时我们会在后面讲到如何使。

第三步：编写测试页面

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  </head>
    <body>
        <div>
            <a href="qiaoker://cid:110&username:xxh">
            执行可执行文件
            </a>
        </div>
    </body>
</html>