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