文/玄魂
前言 |
首次面對題目所示的需求的時候，頭腦中沒有任何概念，於是搜索，所有的中文結果都不是很滿意。所幸老外的幾篇文章還是很有參考價值，雖然最終沒有解決我的問題，但是我還是把這幾篇文章的內容作了抽取和整理，於是有了本文。主要內容如下：
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 瀏覽器插件檢測 |
對於瀏覽器插件的檢測，情況要略微復雜，包括插件是否安裝和插件版本的檢測，本文只討論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。}
其他插件的檢測，參考我給出的英文鏈接。