js浏览器和浏览器插件检测的方法总结
文/玄魂
前言 |
首次面對題目所示的需求的時候，頭腦中沒有任何概念，于是搜索，所有的中文結果都不是很滿意。所幸老外的幾篇文章還是很有參考價值，雖然最終沒有解決我的問題，但是我還是把這幾篇文章的內容作了抽取和整理，于是有了本文。主要內容如下：
1.1??瀏覽器檢測
1.2??瀏覽器插件檢測
1.1??瀏覽器檢測 |
?
（參考：http://www.quirksmode.org/js/detect.html）
對于瀏覽器的類型和版本的檢測，通常我們使用navigator.userAgent屬性，但是它不能適用于所有的瀏覽器，有時還需要使用navigator.vendor、window.opera或者navigator.appVersion屬性。這兩個屬性這里不做詳細的說明，我們先看下面的一段代碼：
var BrowserDetect = {
??? init: function () {
?????????? this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
?????????? this.version = this.searchVersion(navigator.userAgent)
????????????????? || this.searchVersion(navigator.appVersion)
????????????????? || "an unknown version";
?????????? this.OS = this.searchString(this.dataOS) || "an unknown OS";
??? },
??? searchString: function (data) {
?????????? for (var i=0;i<data.length;i++)?? {
????????????????? var dataString = data[i].string;
????????????????? var dataProp = data[i].prop;
????????????????? this.versionSearchString = data[i].versionSearch || data[i].identity;
????????????????? if (dataString) {
??????????????????????? if (dataString.indexOf(data[i].subString) != -1)
?????????????????????????????? return data[i].identity;
????????????????? }
????????????????? else if (dataProp)
??????????????????????? return data[i].identity;
?????????? }
??? },
??? searchVersion: function (dataString) {
?????????? var index = dataString.indexOf(this.versionSearchString);
?????????? if (index == -1) return;
?????????? return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
??? },
??? dataBrowser: [{
????????????????? string: navigator.userAgent,
????????????????? subString: "Chrome",
????????????????? identity: "Chrome"
?????????? },
{
????????????????? prop: window.opera,
????????????????? identity: "Opera",
????????????????? versionSearch: "Version"
?????????? },
（略。。。）
]
};
名為dataBrowser的數組是我們需要檢測的瀏覽器對象，每個對象包含多個屬性用來幫助代碼從navigator.userAgent或者window.opera或者navigator.vendor屬性中提前瀏覽器類別和版本信息。每個對象包含的屬性說明如下：
1)?????????string和subString。告訴程序在string屬性中搜索subString的內容，從而確定瀏覽器類型。
2)?????????prop。使用window.opera來判斷瀏覽器類型。
3)?????????identity。瀏覽器類型標識字符串。
4)?????????versionSearch。用來檢測瀏覽器版本的值，如果沒有該值，使用identity屬性替代。
完整代碼如下（更多解釋內容，可參考我給出的英文鏈接）：
var BrowserDetect = {
?????? init: function () {
????????????? this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
????????????? this.version = this.searchVersion(navigator.userAgent)
??????????????????? || this.searchVersion(navigator.appVersion)
??????????????????? || "an unknown version";
????????????? this.OS = this.searchString(this.dataOS) || "an unknown OS";
?????? },
?????? searchString: function (data) {
????????????? for (var i=0;i<data.length;i++)?? {
??????????????????? var dataString = data[i].string;
??????????????????? var dataProp = data[i].prop;
??????????????????? this.versionSearchString = data[i].versionSearch || data[i].identity;
??????????????????? if (dataString) {
?????????????????????????? if (dataString.indexOf(data[i].subString) != -1)
????????????????????????????????? return data[i].identity;
??????????????????? }
??????????????????? else if (dataProp)
?????????????????????????? return data[i].identity;
????????????? }
?????? },
?????? searchVersion: function (dataString) {
????????????? var index = dataString.indexOf(this.versionSearchString);
????????????? if (index == -1) return;
????????????? return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
?????? },
?????? dataBrowser: [
????????????? {
??????????????????? string: navigator.userAgent,
??????????????????? subString: "Chrome",
??????????????????? identity: "Chrome"
????????????? },
????????????? { ???? string: navigator.userAgent,
??????????????????? subString: "OmniWeb",
??????????????????? versionSearch: "OmniWeb/",
??????????????????? identity: "OmniWeb"
????????????? },
????????????? {
??????????????????? string: navigator.vendor,
??????????????????? subString: "Apple",
??????????????????? identity: "Safari",
??????????????????? versionSearch: "Version"
????????????? },
????????????? {
?????? ????????????? prop: window.opera,
??????????????????? identity: "Opera",
??????????????????? versionSearch: "Version"
????????????? },
????????????? {
??????????????????? string: navigator.vendor,
??????????????????? subString: "iCab",
??????????????????? identity: "iCab"
????????????? },
????????????? {
??????????????????? string: navigator.vendor,
??????????????????? subString: "KDE",
??????????????????? identity: "Konqueror"
????????????? },
????????????? {
??????????????????? string: navigator.userAgent,
??????????????????? subString: "Firefox",
??????????????????? identity: "Firefox"
????????????? },
????????????? {
??????????????????? string: navigator.vendor,
??????????????????? subString: "Camino",
??????????????????? identity: "Camino"
????????????? },
????????????? {???????????? // for newer Netscapes (6+)
??????????????????? string: navigator.userAgent,
??????????????????? subString: "Netscape",
??????????????????? identity: "Netscape"
????????????? },
????????????? {
??????????????????? string: navigator.userAgent,
??????????????????? subString: "MSIE",
??????????????????? identity: "Explorer",
??????????????????? versionSearch: "MSIE"
????????????? },
????????????? {
??????????????????? string: navigator.userAgent,
??????????????????? subString: "Gecko",
??????????????????? identity: "Mozilla",
??????????????????? versionSearch: "rv"
????????????? },
????????????? { ??????????? // for older Netscapes (4-)
??????????????????? string: navigator.userAgent,
??????????????????? subString: "Mozilla",
??????????????????? identity: "Netscape",
??????????????????? versionSearch: "Mozilla"
????????????? }
?????? ],
?????? dataOS : [
????????????? {
??????????????????? string: navigator.platform,
??????????????????? subString: "Win",
??????????????????? identity: "Windows"
????????????? },
????????????? {
??????????????????? string: navigator.platform,
??????????????????? subString: "Mac",
??????????????????? identity: "Mac"
????????????? },
????????????? {
??????????????????? ?? string: navigator.userAgent,
??????????????????? ?? subString: "iPhone",
??????????????????? ?? identity: "iPhone/iPod"
?????? ??? },
????????????? {
??????????????????? string: navigator.platform,
??????????????????? subString: "Linux",
??????????????????? identity: "Linux"
????????????? }
?????? ]
?
};
BrowserDetect.init();
?
1.2??瀏覽器插件檢測 |
主要參考文章：http://www.matthewratzloff.com/blog/2007/06/26/detecting-plugins-in-internet-explorer-and-a-few-hints-for-all-the-others/
對于瀏覽器插件的檢測，情況要略微復雜，包括插件是否安裝和插件版本的檢測，本文只討論IE、Firefox和Chrome瀏覽器。在IE瀏覽器中，插件是作為ActiveXObject存在的，必須創建ActiveXObject對象才能檢測插件是否安裝；在Firefox和Chrome中，可以使用navigator.plugins屬性來枚舉安裝的插件。對于插件的版本檢測，在IE中，可以使用對應的ActiveXObject對象的GetVersions()方法來獲取版本信息；在Firefox中，navigator.plugins['插件標識'].version的方法來獲取版本；在Chrome中，卻沒有統一的方法來獲取插件版本，有的插件根本無法獲取版本信息。
下面是獲取瀏覽器Pdf插件版本信息的代碼：
var?PdfDetect?=?{
????GetInfo:?function?(explorerName)?{
????????this.pdfVersion?=?this.searchPdf(explorerName);
????},
????searchPdf:?function?(explorerName)?{
????????explorerName?=?explorerName.toLowerCase();
????????if?(explorerName?!=?'explorer'?&&?navigator.plugins.length?>?0)?{
????????????var?version?=?0;
????????????if?(navigator.plugins['Adobe?Acrobat']?||?navigator.plugins['Adobe?PDF?Plug-in'])?{
????????????????if?(explorerName?==?'chrome')?{
????????????????????//??version?=?navigator.plugins[i].name.match(/([\d.]+)/)?+?"<br?/>"
????????????????????version?=?8;?//chrome瀏覽器無法有效檢測pdf版本
????????????????}
????????????????else?{
????????????????????version?=?navigator.plugins['Adobe?PDF?Plug-in']???
????????????????????navigator.plugins['Adobe?Acrobat'].version?:?
????????????????????navigator.plugins['Adobe?Acrobat'].version;
????????????????}
????????????}
????????????return?version;
????????}
????????else?{
????????????var?contol?=?null;
????????????try?{
?
????????????????//?AcroPDF.PDF?is?used?by?version?7?and?later
????????????????control?=?new?ActiveXObject('AcroPDF.PDF');
????????????}?catch?(e)?{
????????????????return?0;
????????????}
????????????if?(!control)?{
????????????????try?{
????????????????????//?PDF.PdfCtrl?is?used?by?version?6?and?earlier
????????????????????control?=?new?ActiveXObject('PDF.PdfCtrl');
????????????????}?catch?(e)?{
????????????????????return?0;
????????????????}
????????????}
????????????if?(control)?{
????????????????isInstalled?=?true;
????????????????version?=?control.GetVersions().split(',');
????????????????version?=?version[0].split('=');
????????????????version?=?parseFloat(version[1]);
????????????????return?version;
????????????}
????????????return?0;
????????}
????}
在上面的代碼中，我們可以看到，在IE6和早期版本的瀏覽器中使用control = new ActiveXObject('PDF.PdfCtrl')來創建Pdf插件對象，在更新版本的IE瀏覽器中使用control?=?new?ActiveXObject('AcroPDF.PDF')來創建Pdf對象，然后使用
version?=?control.GetVersions().split(',');
????????????????version?=?version[0].split('=');
????????????????version?=?parseFloat(version[1]);
來獲取Pdf版本。在Firefox和Chrome中，使用navigator.plugins['Adobe?Acrobat']?||?navigator.plugins['Adobe?PDF?Plug-in']來判斷是否安裝了Pdf插件。在Firefox中，使用
version?=?navigator.plugins['Adobe?PDF?Plug-in']???
????????????????????navigator.plugins['Adobe?Acrobat'].version?:?
????????????????????navigator.plugins['Adobe?Acrobat'].version;
來檢測Pdf插件的版本信息。
在chrome中，我沒有檢測Pdf插件的版本。
檢測Flash Player插件的代碼如下：
var isInstalled = false;
var version = null;
if (window.ActiveXObject) {
var control = null;
try {
control = new ActiveXObject('ShockwaveFlash.ShockwaveFlash');
} catch (e) {
return;
}
if (control) {
isInstalled = true;
version = control.GetVariable('$version').substring(4);
version = version.split(',');
version = parseFloat(version[0] + '.' + version[1]);
}
} else {
//在Firefox和Chrome中使用navigator.plugins["Shockwave Flash"]檢測//Flash Player。}
其他插件的檢測，參考我給出的英文鏈接。
總結
以上是生活随笔為你收集整理的js浏览器和浏览器插件检测的方法总结的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： JS window对象常用方法
- 下一篇： js 检测浏览器，呈现引擎和平台