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后还没弹窗,判断没有安装客户端。





    相关文章
    |
    3月前
    |
    监控 JavaScript Java
    Node.js中内存泄漏的检测方法
    检测内存泄漏需要综合运用多种方法,并结合实际的应用场景和代码特点进行分析。及时发现和解决内存泄漏问题,可以提高应用的稳定性和性能,避免潜在的风险和故障。同时,不断学习和掌握内存管理的知识,也是有效预防内存泄漏的重要途径。
    304 62
    |
    3月前
    |
    Web App开发 JavaScript 前端开发
    2024年5月node.js安装(winmac系统)保姆级教程
    本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
    51 2
    2024年5月node.js安装(winmac系统)保姆级教程
    |
    3月前
    |
    开发框架 JavaScript 前端开发
    Node.js日记:客户端和服务端介绍、Node.js介绍
    Node.js日记:客户端和服务端介绍、Node.js介绍
    |
    3月前
    |
    存储 JavaScript 前端开发
    decimal.js库的安装和使用方法
    【10月更文挑战第24天】decimal.js 是一个非常实用的高精度计算库,通过合理的安装和使用,可以在 JavaScript 中实现精确的数值计算和处理。你可以根据具体的需求和项目情况,灵活运用该库来解决数字精度丢失的问题。
    |
    3月前
    |
    Web App开发 JavaScript 前端开发
    使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
    【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
    517 9
    |
    3月前
    |
    监控 JavaScript 前端开发
    如何检测和解决 JavaScript 中内存泄漏问题
    【10月更文挑战第25天】解决内存泄漏问题需要对代码有深入的理解和细致的排查。同时,不断优化和改进代码的结构和逻辑也是预防内存泄漏的重要措施。
    93 6
    |
    4月前
    |
    存储 JavaScript 前端开发
    JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
    JavaScript 数据类型分为基本数据类型和引用数据类型。基本数据类型(如 string、number 等)具有不可变性,按值访问,存储在栈内存中。引用数据类型(如 Object、Array 等)存储在堆内存中,按引用访问,值是可变的。本文深入探讨了这两种数据类型的特性、存储方式、以及检测数据类型的两种常用方法——typeof 和 instanceof,帮助开发者更好地理解 JavaScript 内存模型和类型检测机制。
    179 0
    JavaScript 数据类型详解:基本类型与引用类型的区别及其检测方法
    |
    4月前
    |
    Web App开发 JavaScript 前端开发
    JavaWeb 22.Node.js_简介和安装
    JavaWeb 22.Node.js_简介和安装
    |
    4月前
    |
    前端开发 网络协议
    Nest.js 实战 (十四):如何获取客户端真实 IP
    这篇文章介绍了在Nest.js应用中获取客户端真实IP地址的问题及解决方法。问题出现在使用本地代理时,请求的IP地址总是返回::1或::ffff:127.0.0.1。为解决这个问题,需要确保代理服务器正确设置转发头如X-Forwarded-For或X-Real-IP,后端服务能够读取这些头信息来确定客户端的IP地址。文章以作者自己的OpenResty应用为例,展示了如何通过配置反向代理和设置X-Forwarded-For头来获取真实IP地址,并提供了相关的代码示例。最后,文章提到了使用这个解决方案后的实际效果,例如在操作日志中记录真实IP地址。
    160 0
    |
    4月前
    |
    JavaScript 算法 内存技术
    如何降低node.js版本(nvm下载安装与使用)
    如何降低node.js版本(nvm下载安装与使用)

    热门文章

    最新文章

  • 1
    当面试官再问我JS闭包时,我能答出来的都在这里了。
    45
  • 2
    【02】仿站技术之python技术,看完学会再也不用去购买收费工具了-本次找了小影-感觉页面很好看-本次是爬取vue需要用到Puppeteer库用node.js扒一个app下载落地页-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    28
  • 3
    Node.js 中实现多任务下载的并发控制策略
    34
  • 4
    【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
    26
  • 5
    【JavaScript】深入理解 let、var 和 const
    49
  • 6
    【04】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架二次开发准备工作-以及建立初步后端目录菜单列-优雅草卓伊凡商业项目实战
    47
  • 7
    【03】Java+若依+vue.js技术栈实现钱包积分管理系统项目-若依框架搭建-服务端-后台管理-整体搭建-优雅草卓伊凡商业项目实战
    57
  • 8
    【02】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-ui设计图figmaUI设计准备-figma汉化插件-mysql数据库设计-优雅草卓伊凡商业项目实战
    57
  • 9
    如何通过pm2以cluster模式多进程部署next.js(包括docker下的部署)
    72
  • 10
    【01】Java+若依+vue.js技术栈实现钱包积分管理系统项目-商业级电玩城积分系统商业项目实战-需求改为思维导图-设计数据库-确定基础架构和设计-优雅草卓伊凡商业项目实战
    55