js检测客户端是否安装
前言
需求背景:一个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检测客户端是否安装的更多相关文章
- 利用 html js判断 客户端是否安装了某个app 安装了就打开 否则跳转到gp
三种方式 方式一:简单的进行打开app,延时操作若未打开直接跳gp function isInstalled(){ var urlFrag = 'somepars'; var the_href = ' ...
- 如何用js检测手机是否安装某个app
问题描述 如果本地安装了app那么直接打开,否则苹果要跳转到app-store,安卓则要跳到对应的市场 解决方案 一 //html代码中 的 a 标签,以微信为例,默认的是调用weixin schem ...
- js 检测客户端网速
<!doctype html> <html> <head> <meta http-equiv=Content-Type content="text/ ...
- JS 检测客户端断网情况
常用方法 1 navigator.onLine 2 window.addEventListener() 3 获取网络资源 4 ajax请求 1. navigator.onLine 只会在机器未连上路由 ...
- 一个JS判断客户端是否已安装某个字体(Only IE)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- H5案例分享:使用JS判断客户端、浏览器、操作系统类型
使用JS判断客户端.浏览器.操作系统类型 一.JS判断客户端类型 JS判断客户端是否是iOS或者Android手机移动端 通过判断浏览器的userAgent,用正则来判断手机是否是ios和Androi ...
- Node.js系列基础学习----安装,实现Hello World, REPL
Node.js基础学习 简介 简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台.Node.js是一 ...
- Node.js的简介和安装
一.Node.js的简介和安装 a) 什么是Node.js? Node.js是一个开发平台 让JavaScript运行在服务器端的开发平台 ---简单点说就是用JavaScript写服务器 ...
- 检测客户端显示器分辨率、浏览器类型和客户端IP
原文:检测客户端显示器分辨率.浏览器类型和客户端IP 下面的代码实现了检测客户端显示器分辨率.浏览器类型和客户端IP的功能.你可以把客户端信息保存到Session,ViewState等中以便在其它的页 ...
随机推荐
- 使用JavaScript获取url(request)中的参数
这次是使用JavaScript来获取url(request)中的参数 在日常页面编写的过程中为了方便操作在<script>中通过使用window.location.href="要 ...
- 「题解」PA2019 Terytoria
本文将同步发布于: 洛谷博客: csdn: 博客园: 因为简书系统升级,所以本文未在简书上发布. 题目 题目链接:洛谷 P5987.LOJ 3320.官网. 题意概述 在二维平面直角坐标系上,有一个长 ...
- 简单的Java面向对象程序
上一篇随笔Java静态方法和实例方法的区别以及this的用法,老师看了以后说我还是面向过程的编程,不是面向对象的编程,经过修改以后,整了一个面向对象的出来: /** * 3 延续任务2, 定义表示圆形 ...
- NEXTCLOUD 常见错误
HTTP请求头"Strict-Transport-Security"没有配置为至少"15552000"秒出于增强安全性考虑推荐按照安全提示中的说明启用HSTS ...
- 11张流程图帮你搞定 Spring Bean 生命周期
在网上已经有跟多Bean的生命周期的博客,但是很多都是基于比较老的版本了,最近吧整个流程化成了一个流程图.待会儿使用流程图,说明以及代码的形式来说明整个声明周期的流程.注意因为代码比较多,这里的流程图 ...
- Windows内核开发-Windows内部概述-2-
Windows内部概述-2- 线程: 执行代码的实体是线程.一个线程的包含在进程里面的,线程使用进程提供的资源来运行代码. 一个线程拥有以下的内容: 1:明确的运行模式,用户态或者内核态. 2:执行的 ...
- DOS命令行(3)——Windows运行窗口打开特定功能
cmd 开启命令解释权或启用Windows中的某程序 cmd /c 执行完命令后关闭命令窗口 cmd /k 执行完命令后不关闭命令窗口 winver 查看Windows版本信息版权信息授权信息 ...
- 02 Linux系统发送告警邮件
# yum install mailx -y # vim /etc/mail.rc set from=hyjy2504164765@163.com smtp=smtp.163.com set smtp ...
- C# 小知识点记录
1.当计算数据有小数点时不要使用float和double类型的数据,使用这两个会计算不准确.使用decimal 2.如果使用decimal计算数据,遇到除不进的数据有很多小数点的时候,在计算结果后面接 ...
- POJ 2826 An Easy Problem? 判断线段相交
POJ 2826 An Easy Problem?! -- 思路来自kuangbin博客 下面三种情况比较特殊,特别是第三种 G++怎么交都是WA,同样的代码C++A了 #include <io ...