資訊專欄INFORMATION COLUMN
摘要：判斷是否安裝插件最近遇到一個(gè)需求點(diǎn)擊一個(gè)按鈕，然后打開本地的軟件。所以需要判斷當(dāng)前的電腦是否已經(jīng)安裝指定軟件，如果已安裝，則打開軟件否則，彈出模態(tài)框，提示下載并安裝軟件。
js 判斷是否安裝插件
最近遇到一個(gè)需求：點(diǎn)擊一個(gè)按鈕，然后打開本地的軟件。類似一些網(wǎng)站打開 qq 一樣。但是后來遇到一個(gè)問題，如果本地沒有安裝這個(gè)指定的軟件，則無法打開。所以需要判斷當(dāng)前的電腦是否已經(jīng)安裝指定軟件，如果已安裝，則打開軟件；否則，彈出模態(tài)框，提示下載并安裝軟件。
剛開始的時(shí)候，一直在考慮如何使用 js 來判斷某個(gè)軟件是否安裝（可以被瀏覽器調(diào)用的軟件）。卻一直沒有頭緒。后來在各大網(wǎng)站找到一些方法：
ActiveXObject
navigator.plugins
但后來發(fā)現(xiàn)這些方法都無效，很是失望。
最后在 github 上找到了一個(gè)插件：
Custom Protocol Detection in Browser
使用方法參考里面的example即可。
基于插件原理的重構(gòu)在插件中有一個(gè)部分的原理是這樣的：
如果本地安裝了插件，當(dāng)嘗試使用插件打開時(shí)，window后觸發(fā)blur事件；如果無法打開插件，則什么都不會(huì)發(fā)生。
根據(jù)這個(gè)原理，進(jìn)行一個(gè)簡(jiǎn)單的封裝。（其實(shí)也不算是封裝，只是簡(jiǎn)單的把其中的原理展現(xiàn)出來而已）
這里使用的是es5代碼，主要是為了兼任低版本的瀏覽器，可以在理解其中的原理后，移植到相應(yīng)的項(xiàng)目或者框架。
// dom部分plugin 1
plugin 2
plugin 3
// js部分
var links = document.getElementsByClassName("link")
var readyToBlur = false
var hasPlugin = null
var timeout = 1000
window.addEventListener("blur", function () {
if (readyToBlur) {
hasPlugin = true
console.log("has plugin")
}
})
for (var i = 0; i < links.length; i++) {
(function (id, win) {
links[id].addEventListener("click", function () {
readyToBlur = true
hasPlugin = false
window.location.href = links[id].getAttribute("data-link")
var t = setTimeout(function () {
win.readyToBlur = false
!hasPlugin && onHasNoPlugin(links[id].innerText)
clearTimeout(t)
}, timeout)
})
})(i, window)
}
function onHasNoPlugin(pluginName) {
console.log("no plugin: " + pluginName)
}
原理分析
打開本地插件/軟件（例如 qq）的方法基本是讓瀏覽器的 url 發(fā)生改變，一般有以下方法：
使用a標(biāo)簽，并使用href屬性。plugin
window.location.href = "plugin:data"
window.open("plugin:data")
這里使用的是第二種方法。第一種不好做攔截，第三種無論是否安裝都會(huì)打開一個(gè)新的窗口。
當(dāng)嘗試打開軟件時(shí)，開始監(jiān)聽window的blur事件。在指定的時(shí)間內(nèi)，如果觸發(fā)了blur事件，說明軟件已經(jīng)安裝，修改hasPlugin標(biāo)識(shí)；否則無操作。然后當(dāng)時(shí)間到期時(shí)，移除監(jiān)聽，并判斷hasPlugin的值，如果為false，則說明沒有安裝插件，執(zhí)行相應(yīng)的處理函數(shù)。
另外還需注意一點(diǎn)，這里設(shè)置的 timeout 是根據(jù)實(shí)際情況而定的，因?yàn)橛幸恍┸浖蜷_的速度可能很慢，不會(huì)像 qq 這樣的軟件一點(diǎn)擊就會(huì)馬上打開，所以這里把監(jiān)聽的 timeout 設(shè)置為 1 秒。
2019-01-07 更新
如果需要強(qiáng)制將某個(gè)exe程序?qū)懭胱?cè)表，可以參考以下文章
Js調(diào)用exe程序方法
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.specialneedsforspecialkids.com/yun/98229.html
摘要：何時(shí)只要讓程序延遲執(zhí)行一件事時(shí)如何件事啟動(dòng)定時(shí)器讓程序等待毫秒后，自動(dòng)執(zhí)行一次，執(zhí)行后自動(dòng)停止停止定時(shí)器定時(shí)器原理定時(shí)器中的任務(wù)函數(shù)，必須等待主程序所有語句執(zhí)行后，才能執(zhí)行。將事件監(jiān)聽對(duì)象加入到瀏覽器的監(jiān)聽隊(duì)列中。 前端知識(shí)點(diǎn)總結(jié)——BOM 1.BOM: Browser Object Model 什么是: 專門操作瀏覽器窗口的API 沒有標(biāo)準(zhǔn), 導(dǎo)致瀏覽器兼容性問題 包括: w...
摘要：注意事項(xiàng)以下版本要設(shè)置默認(rèn)編碼，，否則程序可能無法正確顯示中文。組成部分協(xié)議是對(duì)請(qǐng)求和響應(yīng)的報(bào)文內(nèi)容進(jìn)行了約束和規(guī)范。請(qǐng)求報(bào)文請(qǐng)求是由客戶端發(fā)起，其規(guī)范格式為請(qǐng)求行請(qǐng)求頭請(qǐng)求主體。 showImg(https://segmentfault.com/img/remote/1460000013696283?w=1920&h=1080); Ajax 前言 前面我們已經(jīng)學(xué)習(xí)了js基礎(chǔ)知識(shí)和一些...
摘要：注意事項(xiàng)以下版本要設(shè)置默認(rèn)編碼，，否則程序可能無法正確顯示中文。組成部分協(xié)議是對(duì)請(qǐng)求和響應(yīng)的報(bào)文內(nèi)容進(jìn)行了約束和規(guī)范。請(qǐng)求報(bào)文請(qǐng)求是由客戶端發(fā)起，其規(guī)范格式為請(qǐng)求行請(qǐng)求頭請(qǐng)求主體。 showImg(https://segmentfault.com/img/remote/1460000013696283?w=1920&h=1080); Ajax 前言 前面我們已經(jīng)學(xué)習(xí)了js基礎(chǔ)知識(shí)和一些...
閱讀 2473·2021-11-22 15:35
閱讀 3763·2021-11-04 16:14
閱讀 2694·2021-10-20 13:47
閱讀 2504·2021-10-13 09:49
閱讀 2074·2019-08-30 14:09
閱讀 2375·2019-08-26 13:49
閱讀 885·2019-08-26 10:45
閱讀 2774·2019-08-23 17:54
