js判斷是否可以打開本地軟體

js 判斷是否安裝插件

最近遇到一個需求：點擊一個按鈕，然後打開本地的軟件。類似一些網站打開 qq 一樣。但是後來遇到一個問題，如果本地沒有安裝這個指定的軟件，則無法打開。所以需要判斷當前的電腦是否已經安裝指定軟件，如果已安裝，則打開軟件；否則，彈出模態框，提示下載並安裝軟件。

如果本地安裝了插件，當嘗試使用插件打開時，window後觸發blur事件；如果無法打開插件，則什麼都不會發生。

根據這個原理，進行一個簡單的封裝。（其實也不算是封裝，只是簡單的把其中的原理展現出來而已）

這裡使用的是es5代碼，主要是為了兼任低版本的瀏覽器，可以在理解其中的原理後，移植到相應的項目或者框架。

// 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 發生改變，一般有以下方法：

1. 使用a標籤，並使用href屬性。
2. window.location.href = 'plugin:data'
3. window.open('plugin:data')

這裡使用的是第二種方法。第一種不好做攔截，第三種無論是否安裝都會打開一個新的窗口。

當嘗試打開軟件時，開始監聽window的blur事件。在指定的事件內，如果觸發了blur事件，說明軟件已經安裝，修改hasPlugin標識；否則無操作。然後當時間到期時，移除監聽，並判斷hasPlugin的值，如果為false，則說明沒有安裝插件，執行相應的處理函數。

另外還需注意一點，這裡設置的 timeout 是根據實際情況而定的，因為有一些軟件打開的速度可能很慢，不會像 qq 這樣的軟件一點擊就會馬上打開，所以這裡把監聽的 timeout 設置為 1 秒。

這些技術如何學習，有沒有免費資料？

對前端的技術，架構技術感興趣的同學關注我的頭條號，並在後臺私信發送關鍵字：“前端”即可獲取免費的架構師學習資料

知識體系已整理好，歡迎免費領取。還有面試視頻分享可以免費獲取。關注我，可以獲得沒有的架構經驗哦！

閱讀更多 前端攻城小牛 的文章

關鍵字: 軟件 騰訊QQ 安裝