js 判斷是否安裝插件
最近遇到一個需求：點擊一個按鈕，然後打開本地的軟件。類似一些網站打開 qq 一樣。但是後來遇到一個問題，如果本地沒有安裝這個指定的軟件，則無法打開。所以需要判斷當前的電腦是否已經安裝指定軟件，如果已安裝，則打開軟件；否則，彈出模態框，提示下載並安裝軟件。
剛開始的時候，一直在考慮如何使用 js 來判斷某個軟件是否安裝（可以被瀏覽器調用的軟件）。卻一直沒有頭緒。後來在各大網站找到一些方法：
但後來發現這些方法都無效，很是失望。
最後在 github 上找到了一個插件：
Custom Protocol Detection in Browser
使用方法參考裏面的example即可。
基於插件原理的重構
在插件中有一個部分的原理是這樣的：
如果本地安裝了插件，當嘗試使用插件打開時，window後觸發blur事件；如果無法打開插件，則什麼都不會發生。
根據這個原理，進行一個簡單的封裝。（其實也不算是封裝，只是簡單的把其中的原理展現出來而已）
這裏使用的是es5代碼，主要是爲了兼任低版本的瀏覽器，可以在理解其中的原理後，移植到相應的項目或者框架。
// dom部分
<p class="link" data-link="blahblah:randomstuff">plugin 1</p>
<p class="link" data-link="mailto:[email protected]">plugin 2</p>
<p class="link" data-link="tencent://message">plugin 3</p>// 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 發生改變，一般有以下方法：
- 使用
a標籤，並使用href屬性。<a href="plugin:data">plugin</a> window.location.href = 'plugin:data'window.open('plugin:data')
這裏使用的是第二種方法。第一種不好做攔截，第三種無論是否安裝都會打開一個新的窗口。
當嘗試打開軟件時，開始監聽window的blur事件。在指定的事件內，如果觸發了blur事件，說明軟件已經安裝，修改hasPlugin標識；否則無操作。然後當時間到期時，移除監聽，並判斷hasPlugin的值，如果爲false，則說明沒有安裝插件，執行相應的處理函數。
另外還需注意一點，這裏設置的 timeout 是根據實際情況而定的，因爲有一些軟件打開的速度可能很慢，不會像 qq 這樣的軟件一點擊就會馬上打開，所以這裏把監聽的 timeout 設置爲 1 秒。