前言

需求背景:一个web下载页面,需要检测pc是否安装了客户端软件(windows软件)。网页上有一个打开客户端按钮。若安装了客户端软件,则直接打开,否则下载软件。支持web下载页面在iframe下

打开客户端的方法

通过客户端软件在注册表注册的自定义协议打开。例如: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后还没弹窗,判断没有安装客户端。

js检测客户端是否安装的更多相关文章

  1. 利用 html js判断 客户端是否安装了某个app 安装了就打开 否则跳转到gp

    三种方式 方式一:简单的进行打开app,延时操作若未打开直接跳gp function isInstalled(){ var urlFrag = 'somepars'; var the_href = ' ...

  2. 如何用js检测手机是否安装某个app

    问题描述 如果本地安装了app那么直接打开,否则苹果要跳转到app-store,安卓则要跳到对应的市场 解决方案 一 //html代码中 的 a 标签,以微信为例,默认的是调用weixin schem ...

  3. js 检测客户端网速

    <!doctype html> <html> <head> <meta http-equiv=Content-Type content="text/ ...

  4. JS 检测客户端断网情况

    常用方法 1 navigator.onLine 2 window.addEventListener() 3 获取网络资源 4 ajax请求 1. navigator.onLine 只会在机器未连上路由 ...

  5. 一个JS判断客户端是否已安装某个字体(Only IE)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  6. H5案例分享:使用JS判断客户端、浏览器、操作系统类型

    使用JS判断客户端.浏览器.操作系统类型 一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Androi ...

  7. Node.js系列基础学习----安装,实现Hello World, REPL

    Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...

  8. Node.js的简介和安装

    一.Node.js的简介和安装 a)       什么是Node.js? Node.js是一个开发平台 让JavaScript运行在服务器端的开发平台 ---简单点说就是用JavaScript写服务器 ...

  9. 检测客户端显示器分辨率、浏览器类型和客户端IP

    原文:检测客户端显示器分辨率.浏览器类型和客户端IP 下面的代码实现了检测客户端显示器分辨率.浏览器类型和客户端IP的功能.你可以把客户端信息保存到Session,ViewState等中以便在其它的页 ...

随机推荐

  1. 使用JavaScript获取url(request)中的参数

    这次是使用JavaScript来获取url(request)中的参数 在日常页面编写的过程中为了方便操作在<script>中通过使用window.location.href="要 ...

  2. 「题解」PA2019 Terytoria

    本文将同步发布于: 洛谷博客: csdn: 博客园: 因为简书系统升级,所以本文未在简书上发布. 题目 题目链接:洛谷 P5987.LOJ 3320.官网. 题意概述 在二维平面直角坐标系上,有一个长 ...

  3. 简单的Java面向对象程序

    上一篇随笔Java静态方法和实例方法的区别以及this的用法,老师看了以后说我还是面向过程的编程,不是面向对象的编程,经过修改以后,整了一个面向对象的出来: /** * 3 延续任务2, 定义表示圆形 ...

  4. NEXTCLOUD 常见错误

    HTTP请求头"Strict-Transport-Security"没有配置为至少"15552000"秒出于增强安全性考虑推荐按照安全提示中的说明启用HSTS ...

  5. 11张流程图帮你搞定 Spring Bean 生命周期

    在网上已经有跟多Bean的生命周期的博客,但是很多都是基于比较老的版本了,最近吧整个流程化成了一个流程图.待会儿使用流程图,说明以及代码的形式来说明整个声明周期的流程.注意因为代码比较多,这里的流程图 ...

  6. Windows内核开发-Windows内部概述-2-

    Windows内部概述-2- 线程: 执行代码的实体是线程.一个线程的包含在进程里面的,线程使用进程提供的资源来运行代码. 一个线程拥有以下的内容: 1:明确的运行模式,用户态或者内核态. 2:执行的 ...

  7. DOS命令行(3)——Windows运行窗口打开特定功能

    cmd 开启命令解释权或启用Windows中的某程序 cmd /c 执行完命令后关闭命令窗口 cmd /k 执行完命令后不关闭命令窗口   winver 查看Windows版本信息版权信息授权信息   ...

  8. 02 Linux系统发送告警邮件

    # yum install mailx -y # vim /etc/mail.rc set from=hyjy2504164765@163.com smtp=smtp.163.com set smtp ...

  9. C# 小知识点记录

    1.当计算数据有小数点时不要使用float和double类型的数据,使用这两个会计算不准确.使用decimal 2.如果使用decimal计算数据,遇到除不进的数据有很多小数点的时候,在计算结果后面接 ...

  10. POJ 2826 An Easy Problem? 判断线段相交

    POJ 2826 An Easy Problem?! -- 思路来自kuangbin博客 下面三种情况比较特殊,特别是第三种 G++怎么交都是WA,同样的代码C++A了 #include <io ...