JS检测客户端是否安装

简介: JS检测客户端是否安装

通过浏览器打开某个客户端,需要检测看客户端是否已经安装过了,未安装则提示安装该客户端,已安装则直接打开

打开客户端的方法

通过客户端软件在注册表注册的自定义协议打开。例如:js代码location.href = 'baseonline://';

查看注册表方法: 在键盘上按“win+R”,打开运行窗口,在里面输入regedit,回车即可进入注册表编辑器

实现

方案1: 首先github上找到这个方案https://github.com/ismailhabib/custom-protocol-detection对多个浏览器都实现了,基本都是hack方法。不足点是,若检测页面在iframe里面,谷歌浏览器的检测方法不起作用。如果检测页面不在iframe下,方案1就能满足使用

方案2:针对所在检测页面是iframe下的页面。找到另外一个方法去实现。在谷歌浏览器测试通过。其他的没测。

由于方案2只在谷歌测试过,可以把方案1和方案2结合使用。覆盖更多浏览器类型

方案2的具体实现

       /**
         * uri 打开客户端的uri
         * failCb 打开客户端失败回调
         * successCb 打开客户端成功回调
         */
        function openUriWithInputTimeoutHack(uri, 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 onblur
          location.href = uri
          // Note: timeout could vary as per the browser version, have a higher value
          var 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);
                    }
                };
            }
        }
        // 测试
        let protocalUrl = `baseonline://`
        openUriWithInputTimeoutHack(protocalUrl, () => {
          console.log('检测到,未安装客户端')
        }, () => {
            // 浏览器弹窗提示
          console.log('检测到:已安装了客户端')
        })
    


    原理:同样是hack方法,利用input聚焦失焦去判断。点击打开客户端按钮,input聚焦。

    1. 如果浏览器检测到本地系统有对应的注册码,则会弹窗提示是否打开客户端软件,input失去焦点,判断安装了客户端。

    2. 否则1s后还没弹窗,判断没有安装客户端。





    相关文章
    |
    4天前
    |
    缓存 JavaScript 安全
    2022年最新最详细的安装Node.js以及cnpm(详细图解过程、绝对成功)
    这篇文章提供了2022年最新最详细的Node.js和cnpm安装教程,包括步骤图解、全局配置路径、cnpm安装命令、nrm的安装与使用,以及如何管理npm源和测试速度。
    2022年最新最详细的安装Node.js以及cnpm(详细图解过程、绝对成功)
    |
    5天前
    |
    JavaScript
    Node.js的安装
    这篇文章提供了Node.js的安装指南,包括从官网下载、安装步骤、验证安装是否成功,以及如何安装淘宝镜像加速器cnpm或使用淘宝npm镜像来加速npm包的安装过程。
    Node.js的安装
    |
    6天前
    |
    JavaScript 前端开发 API
    JavaScript特性检测
    JavaScript特性检测
    |
    14天前
    |
    资源调度 JavaScript 前端开发
    安装 Nuxt.js 的步骤和注意事项
    【8月更文挑战第6天】
    10 3
    |
    14天前
    |
    资源调度 JavaScript
    不使用脚手架安装nuxt.js
    【8月更文挑战第6天】
    |
    22天前
    |
    JavaScript Windows
    安装node.js与webpack创建vue2项目
    安装node.js与webpack创建vue2项目
    18 1
    |
    1天前
    |
    JavaScript Linux
    2022年超详细在CentOS 7上安装Node.js方法(源码安装)
    这篇文章介绍了在CentOS 7系统上通过源码安装Node.js的详细步骤,包括从官网下载Node.js源码包、将安装包上传至虚拟机、解压安装包、删除压缩文件、编译安装Node.js、检查Node.js和npm版本,以及切换npm源到淘宝镜像以加速下载。此外,还提供了一个获取Linux下Node.js离线安装包的微信公众号搜索方式。
    |
    5天前
    |
    JavaScript 前端开发 Ubuntu
    如何在 VPS 上安装 Express(Node.js 框架)并设置 Socket.io
    如何在 VPS 上安装 Express(Node.js 框架)并设置 Socket.io
    11 0
    |
    5天前
    |
    JavaScript Windows
    记一下 Windows11 安装与配置 node.js 的标准步骤
    这篇文章记录了在Windows 11系统上安装和配置Node.js的步骤,包括安装Node.js、验证安装、配置npm、设置npm镜像加速、全局安装cnpm并配置镜像、解决TLS连接不安全警告的详细过程。
    13 0
    |
    1月前
    |
    Web App开发 JavaScript 前端开发
    Node.js介绍 , 安装与使用
    【7月更文挑战第6天】Node.js介绍 , 安装与使用
    43 5

    热门文章

    最新文章