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浏览器和浏览器插件检测的方法总结相关推荐
- 谷歌Chrome浏览器无法安装插件的解决方法
谷歌Chrome浏览器无法安装插件的解决方法 参考文章: (1)谷歌Chrome浏览器无法安装插件的解决方法 (2)https://www.cnblogs.com/liweis/p/10122989. ...
- html5中检测网络状态的方法,前端js监听浏览器网络变化
首先,为什么要让前端判断用户的网络状态呢--为了更好的用户体验. 其次,前端能否判断网络状态?有哪些方法? 1,可以做到渐进式判断,不能做到绝对准确. 2,使用的是navigator.onLine或n ...
- [转]浅谈浏览器插件检测 和自定义协议的支持
前一阵子一直在折腾浏览器的插件检测和自定义协议的支持. 经过种种痛苦的折腾,算是对这一领域有了点浅显的认知.特此记录一下 一.背景知识 自定义协议:常用的协议有 http:// https:// f ...
- js/jquery判断浏览器的方法总结
JS获取浏览器信息 浏览器代码名称:navigator.appCodeName 浏览器名称:navigator.appName 浏览器版本号:navigator.appVersion 对Java的支持 ...
- js/jquery判断浏览器的方法小结
在网站前端开发中,浏览器兼容性是前端开发框架要解决的第一个问题,要解决兼容性问题就得首先准确判断出浏览器的类型及其版本,而判断浏览器的版本一般只能通过分析浏览器的userAgent才能知道.今天我们把 ...
- 使用js开发IE浏览器本地插件
使用js开发的IE插件可以在当前浏览的页面中执行js代码,在此基础上实现任何用户可以想到的功能. 可以针对不用的网站做一些common处理(比如提取某类信息),也可以针对特定网站做特色处理(比如抢购火 ...
- java中如何设置浏览器宽度_[Java教程]关于JS中获取浏览器高度和宽度值的多种方法(多浏览器)_星空网...
关于JS中获取浏览器高度和宽度值的多种方法(多浏览器) 2017-08-07 0 三种浏览器获取值方法 IE中: document.body.clientWidth ==> BODY对象宽度 d ...
- Google浏览器中扩展插件方法
Google浏览器中扩展插件方法 一.按照下图流程打开谷歌浏览器的"扩展程序". 二.点击打开"开发者模式". 三.点击"加载已解压的扩展程序&quo ...
- Chrome浏览器使用谷歌翻译插件的正确方法
大家好,我是爱编程的喵喵.双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中.从事机器学习以及相关的前后端开发工作.曾在阿里云.科大讯飞.CCF等比赛获得多次Top名次.喜 ...
最新文章
- Python的XML-RPC学习
- NDK相关概念与NDK开发步骤
- boost中的shared_ptr的一些理解
- OpenCV的图像处理——iOS与OpenCV之间图像转换
- html 上传文件_【实战篇】记一次文件上传漏洞绕过
- 阿里面试_技术问题和经验总结
- java按两列输出_有没有一种简单的方法可以将两列输出到Java中的控制台? - java...
- 7台不同配置M1 MacBook Pro真实测试
- oracle between 和大于小于性能_2.oracle伪例+序列
- 数学模型方法分类总结
- hdu 1560 DNA sequence(IDA*)
- postman简介与安装步骤
- QQ在线客服代码演示-asp源代码
- 全息成像与集成成像原理
- 互联网造车最靠谱的方式是合作
- 【Opencv】基于python-opencv的CV2实现图片OCR前的扫描摆正OCR识别【代码实现】
- PoisonIvy Rat 远程溢出实战
- 大白话Vue之publicPath
- 单曲循环 翻译_Loop, repeat and replay “单曲循环” 用哪个词?
- 电子邮件归档普及迅速 面临应用瓶颈
热门文章
- 【数字信号处理】基本序列 ( 单位阶跃序列 | 单位阶跃序列与单位脉冲序列关系 | 矩形序列 | 矩形序列与单位阶跃序列关系 | 矩形序列作用 )
- 【Groovy】编译时元编程 ( AST 语法树分析 | ClassNode 根节点 | 方法 Methods 节点 | 字段 Fields 节点 | 属性 Properties 节点 )
- 【Android 异步操作】手写 Handler ( 循环者 Looper | Looper 初始化 | Looper 遍历消息队列 MessageQueue )
- 【Kotlin】Kotlin 中使用 ButterKnife ( 仅用于适配 Kotlin 语言 | 不推荐新项目使用 )
- Yuan先生的博客网址
- android-学习1 配置环境
- 第22条:理解NSCopying 协议
- #在android studio中维护日程管理系统
- BZOJ 1101: [POI2007]Zap
- Webbrowers控件的小技巧