js浏览器和浏览器插件检测的方法总结
2016-08-05 01:52
295 查看
转载自:http://blog.csdn.net/zajin/article/details/17239457
对于浏览器的类型和版本的检测,通常我们使用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属性中提前浏览器类别和版本信息。每个对象包含的属性说明如下:
2) prop。使用window.opera来判断浏览器类型。
4)
完整代码如下(更多解释内容,可参考我给出的英文链接):
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();
主要参考文章: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属性来枚举安装的插件:
window.onload=function(){
console.info(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。}
对于浏览器的类型和版本的检测,通常我们使用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属性来枚举安装的插件:
window.onload=function(){
console.info(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检测浏览器插件的方法总结
- js浏览器和浏览器插件检测的方法总结
- js浏览器和浏览器插件检测的方法总结
- js浏览器和浏览器插件检测的方法总结
- js通用方法检测浏览器是否已安装指定插件(IE与非IE通用)
- jQuery-全屏滚动插件【fullPage.js】API 使用方法总结
- jQuery-全屏滚动插件【fullPage.js】API 使用方法总结
- navigator,JS检测浏览器插件
- js中检测用了哪一种浏览器(读书知识总结)
- js浏览器检测的一些方法
- 浏览器开发-插件调js,js再调插件中方法,js不执行
- navigator,JS检测浏览器插件
- js检测浏览器安装了什么插件
- JS检测浏览器插件
- js通用方法检測浏览器是否已安装指定插件(IE与非IE通用)
- 使用js检测浏览器是否支持html5中的video标签的方法
- js/jquery判断浏览器的方法总结
- js/jquery判断浏览器的方法总结
- javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)