js判断是否可以打开本地软件

原创 年树先生 随笔 前端面试 2345阅读 12 天前 举报

js 判断是否安装插件

最近遇到一个需求:点击一个按钮,然后打开本地的软件。类似一些网站打开 qq 一样。但是后来遇到一个问题,如果本地没有安装这个指定的软件,则无法打开。所以需要判断当前的电脑是否已经安装指定软件,如果已安装,则打开软件;否则,弹出模态框,提示下载并安装软件。

js判断是否可以打开本地软件

如果本地安装了插件,当尝试使用插件打开时,window后触发blur事件;如果无法打开插件,则什么都不会发生。

根据这个原理,进行一个简单的封装。(其实也不算是封装,只是简单的把其中的原理展现出来而已)

这里使用的是es5代码,主要是为了兼任低版本的浏览器,可以在理解其中的原理后,移植到相应的项目或者框架。

原理分析

打开本地插件(软件,例如 qq)的方法基本是让浏览器的 url 发生改变,一般有以下方法:

  1. 使用a标签,并使用href属性。<a href="plugin:data">plugin</a>
  2. window.location.href = 'plugin:data'
  3. window.open('plugin:data')

这里使用的是第二种方法。第一种不好做拦截,第三种无论是否安装都会打开一个新的窗口。

当尝试打开软件时,开始监听window的blur事件。在指定的事件内,如果触发了blur事件,说明软件已经安装,修改hasPlugin标识;否则无操作。然后当时间到期时,移除监听,并判断hasPlugin的值,如果为false,则说明没有安装插件,执行相应的处理函数。

另外还需注意一点,这里设置的 timeout 是根据实际情况而定的,因为有一些软件打开的速度可能很慢,不会像 qq 这样的软件一点击就会马上打开,所以这里把监听的 timeout 设置为 1 秒。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:864305860,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复