js 判断是否可以打开本地软件
js判断时候可以打开本地的软件或者插件
点击一个按钮,打开本地的软件,比如问题反馈,需要调起本地的邮箱,填入一些信息。
这个功能<a>标签有提供支持,但是如果本地没有安装邮箱,则无法打开,点了之后也没有任何反应,那么就需要判断当前电脑或者手机是否已经安装了指定的软件,如果已经安装,则打开该软件,否则,弹出模态框,给用户提示。
其实这个并不好判断,后来在各大网站中找到一下方法
然而这些方法都无效
最后在GitHub上发现了一个插件 custom-protocol-detection
在插件中有这样一个原理:如果本地安装了软件,当尝试打开时,window后触发 blur 事件,如果无法打开,则什么都不会发生
根据这个原理,进行一个非常简单的封装,这里使用的是 vue + es6,只在Chrome或者移动端中可用
<template>
<div>
<p
class="link"
data-link="mailto:lihuan10@baidu.com"
@click="openMailto">
测试打开邮箱
</p>
</div>
</template> <script>
export default {
name: 'plugin',
data() {
return {
readyToBlur: false,
hasPlugin: null,
timeout: 1000,
timer: null
}
},
methods: {
openMailto(e) {
let link = e.target.dataset.link
this.readyToBlur = true;
this.hasPlugin = false;
window.location.href = link;
this.timer = setTimeout(() => {
this.readyToBlur = false;
!this.hasPlugin && this.noPlugin('mailto');
clearTimeout(this.timer);
}, this.timeout);
},
noPlugin(pluginName) {
console.log('no plugin ' + pluginName);
}
},
mounted() {
window.addEventListener('blur', () => {
if (this.readyToBlur) {
this.hasPlugin = true;
console.log('has plugin');
}
});
},
}
</script>
打开本地软件(比如邮箱,qq)的方法都是让浏览器的url发生改变,一般有一下方法
1. 使用 a 标签,并使用 href 属性,<a href="plugin: data">plugin</a>
2. 使用 window.location.href = 'plugin: data';
3. 使用 window.open('plugin: data');
这里使用的是第二种,第一种不好做拦截,第三种无论是否安装都会打开一个新的窗口
注意:这里设置的 timeout 是根据实际情况而定的,因为有一些软件打开的速度很慢。
js 判断是否可以打开本地软件的更多相关文章
- js通过注册表找到本地软件安装路径并且执行
场景:用js执行本地的安装软件,如果不存在就执行安装 操作步骤: 1.前台js代码 <script type="text/javascript"> function e ...
- 实现HTML调用打开本地软件文件
有时候我们想要实现一个功能,就是在HTML页面点击一个链接就能调用打开本地可执行文件.就像腾讯QQ.迅雷这种. 而实现这种功能其实也很简单,就是需要我们添加修改注册表,实现自定义URL Protoco ...
- js 判断通过什么打开(安卓、苹果、微信、QQ、浏览器、某个app应用…)
/* 获取当前环境: 系统环境: iOS Android PC 浏览器环境 微信内置浏览器.QQ内置浏览器.正常浏览器 是否app内打开 */ var ua = navigator.userAgent ...
- JS判断网页是否在微信中打开/
JS判断网页是否在微信中打开,代码如下: <script type="text/javascript"> function is_weixn(){ var ua = n ...
- html JS 打开本地程序及文件
在网页打开本地应用程序示例: 一.在本地注册表自定义协议:以自定义调用Viso为例 1.在HKEY_CLASSES_ROOT下添加项ZVISIO. 2.修改ZVISIO项下的"(默认)&qu ...
- js判断当前页面在移动设备还是在PC端中打开
方法一: var isPC = function () { var userAgentInfo = navigator.userAgent.toLowerCase(); var Agents = ne ...
- JS判断PC还是移动端打开网页
最近在做移动端网站,也需兼容PC端.还没找到更好的方法,只能用javascr判断用户是在PC端打开还是移动端打开. JS判断 var isPC = function (){ var userAg ...
- js判断页面在pc端打开还是移动端打开
js判断页面在pc端打开还是移动端打开,分别跳转不同的index.html window.addEventListener('load', function() { // true为手机,false为 ...
- js判断手机是否安装了某一款app,有则打开,没有去下载
function openApp(){ if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) { var loadDateTime = new ...
随机推荐
- postman(七):运行集合,看所有请求执行结果
当在一个collection中录好接口测试用例后,可以利用postman提供的“Run collections”功能来批量执行集合下的所有请求 点击顶部菜单中的[Runner] 或者也可以直接在想 ...
- 虚拟环境之virtualenvwrapper
原来的virtualenv工具使用特别麻烦,主要体现在以下几点 1 创建虚拟环境的命令太长,太难记 2 管理特别麻烦 3 进入虚拟环境需要找到这个虚拟环境的存放目录才行,如果没有统一的存放目录,很难找 ...
- 机器学习 之梯度提升树GBDT
目录 1.基本知识点简介 2.梯度提升树GBDT算法 2.1 思路和原理 2.2 梯度代替残差建立CART回归树 1.基本知识点简介 在集成学习的Boosting提升算法中,有两大家族:第一是AdaB ...
- React文档(十)表单
HTML表单元素和 React里的其他DOM元素有些不同,因为它们会保留一些内部的状态.举个例子,这个普通的表单接受唯一的name值: <form> <label> Name: ...
- 3、简单了解Angular应用的启动过程
首先,了解一下目录结构: 然后,简明扼要的说一下应用的启动过程: 1.首先找到main.ts(模块启动入口),main.ts去找到app中的根模块app.module.ts 2.根模块app.modu ...
- SocketServer模块,hmac模块验证client合法性
hmac模块: 1.模块初识: import hmac # h = hmac.new() #括号里要给它连个bytes类型,一个是自定义的secret_key,一个是你想进行加密的bytes # 密文 ...
- css颜色的五种表示方法
一.最简单.最古老的颜色类型在CSS颜色的关键词,如red blue等. 二.十六进制值,如#0000. 三.RGB: rgb(255,0,0),这是给定的三个参数表示的红色,绿色和蓝色通道的颜色值每 ...
- mysql 安装到最后一步时,start service 为失败状态
容易出现的问题:mysql 安装到最后一步时,start service 为失败状态. 解决方法: 方式1 MySQL安装是出现could not start the service mysql ...
- .net core WebApi Monitor实现并发同步
在.net中,还可以使用Monitor实现线程并发同步.Monitor类是纯托管且完全可移植,并且可能会在操作系统资源需求方面更加高效. Monitor的锁对象尽可能使用引用对象,如果是字符串或值对象 ...
- .net 在同步方法中使用拉姆达表达式执行async/await异步操作
代码如下: static void Main(string[] args) { ((Action)(async () =>{ var data = await HttpHelper.GetOnS ...