浏览器检测

标签: 浏览器 | 发表时间:2013-12-17 04:59 | 作者:卓越团队
出处:http://www.iteye.com

学习要点:
1.navigator 对象
2.客户端检测

由于每个浏览器都具有自己独到的扩展, 所以在开发阶段来判断浏览器是一个非常重要的步骤。 虽然浏览器开发商在公共接口方面投入了很多精力, 努力的去支持最常用的公共功能;但在现实中,浏览器之间的差异,以及不同浏览器的“怪癖”却是非常多的,因此客户端检测除了是一种补救措施,更是一种行之有效的开发策略。

一.navigator 对象
navigator 对象最早由 Netscape Navigator2.0 引入的 navigator 对象, 现在已经成为识别客户端浏览器的事实标准。与之前的 BOM 对象一样,每个浏览器中 的 navigator 对象也都有一套自己的属性。
navigator 对象的属性或方法



 

 
1.浏览器及版本号
不同的浏览器支持的功能、 属性和方法各有不同。 比如 IE 和 Firefox 显示的页面可能就会有所略微不同。

alert('浏览器名称:' + navigator.appName);
alert('浏览器版本:' + navigator.appVersion);
alert('浏览器用户代理字符串:' + navigator.userAgent);
alert('浏览器所在的系统:' + navigator.platform);

 
2.浏览器嗅探器
浏览器嗅探器是一段程序,有了它,浏览器检测就变得简单了。我们这里提供了一个browserdetect.js 文件,用于判断浏览器的名称、版本号及操作系统。


 

alert(BrowserDetect.browser); //名称
alert(BrowserDetect.version); //版本
alert(BrowserDetect.OS) //系统

 
3.检测插件
插件是一类特殊的程序。 他可以扩展浏览器的功能, 通过下载安装完成。 比如, 在线音乐、视频动画等等插件。
navigator 对象的 plugins 属性,这个一个数组。存储在浏览器已安装插件的完整列表。



 
//列出所有的插件名

for (var i = 0; i < navigator.plugins.length; i ++) {
document.write(navigator.plugins[i].name + '<br />');
}

 
//检测非 IE 浏览器插件是否存在

function hasPlugin(name) {
var name = name.toLowerCase();
for (var i = 0; i < navigator.plugins.length; i ++) {
if (navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
return true;
}
}
return false;
}
alert(hasPlugin('Flash')); //检测 Flash 是否存在
alert(hasPlugin('java')) //检测 Java 是否存在

 
4.ActiveX
IE 浏览器没有插件, 但提供了 ActiveX 控件。 ActiveX 控件一种在 Web 页面中嵌入对象或组件的方法。
由于在 JS 中,我们无法把所有已安装的 ActiveX 控件遍历出来,但我们还是可以去验证是否安装了此控件。
//检测 IE 中的控件

function hasIEPlugin(name) {
try {
new ActiveXObject(name);
return true;
} catch (e) {
return false;
}
}

 
//检测 Flash

alert(hasIEPlugin('ShockwaveFlash.ShockwaveFlash'));

 
PS:ShockwaveFlash.ShockwaveFlash 是 IE 中代表 FLASH 的标识符,你需要检查哪种控件,必须先获取它的标识符。
//跨浏览器检测是否支持 Flash

function hasFlash() {
var result = hasPlugin('Flash');
if (!result) {
result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash');
}
return result;
}

 
//检测 Flash

alert(hasFlash());

 
5.MIME 类型
MIME 是指多用途因特网邮件扩展。 它是通过因特网发送邮件消息的标准格式。 现在也被用于在因特网中交换各种类型的文件。
PS:mimeType[]数组在 IE 中不产生输出。
mimeType 对象的属性



 

//遍历非 IE 下所有 MIME 类型信息

for (var i = 0; i < navigator.mimeTypes.length; i++) {
if (navigator.mimeTypes[i].enabledPlugin != null) {
document.write('<dl>');
document.write('<dd>类型名称:' + navigator.mimeTypes[i].type + '</dd>');
document.write('<dd>类型引用: ' + navigator.mimeTypes[i].enabledPlugin.name +
'</dd>');
document.write('<dd>类型描述: ' + navigator.mimeTypes[i].description + '</dd>');
document.write('<dd>类型后缀:' + navigator.mimeTypes[i].suffixes + '</dd>');
document.write('</dl>')
}
}

 
二.客户端检测
客户端检测一共分为三种, 分别为: 能力检测、 怪癖检测和用户代理检测, 通过这三种检测方案,我们可以充分的了解当前浏览器所处系统、所支持的语法、所具有的特殊性能。
1.能力检测
能力检测又称作为特性检测, 检测的目标不是识别特定的浏览器, 而是识别浏览器的能力。 能力检测不必估计特定的浏览器, 只需要确定当前的浏览器是否支持特定的能力, 就可以给出可行的解决方案。
//BOM 章节的一段程序

var width = window.innerWidth; //如果是非 IE 浏览器
if (typeof width != 'number') { //如果是 IE,就使用 document
if (document.compatMode == 'CSS1Compat') {
width = document.documentElement.clientWidth;
} else {
width = document.body.clientWidth; //非标准模式使用 body
}
}

 
PS:上面其实有两块地方使用了能力检测,第一个就是是否支持 innerWidth 的检测,第二个就是是否是标准模式的检测,这两个都是能力检测。
2.怪癖检测(bug 检测)
与能力检测类似, 怪癖检测的目标是识别浏览器的特殊行为。 但与能力检测确认浏览器支持什么能力不同,怪癖检测是想要知道浏览器存在什么缺陷(bug)。
bug 一般属于个别浏览器独有, 在大多数新版本的浏览器被修复。 在后续的开发过程中,如果遇到浏览器 bug 我们再详细探讨。

var box = {
toString : function () {} //创建一个 toString(),和原型中重名了
};
for (var o in box) {
alert(o); //IE 浏览器的一个 bug,不识别了
}

 
3.用户代理检测
用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。 在每一次 HTTP 请求过程中,用户代理字符串是作为响应首部发送的,而且该字符串可以通过 JavaScript 的navigator.userAgent 属性访问。
用户代理代理检测,主要通过 navigator.userAgent 来获取用户代理字符串的,通过这组字符串,我们来获取当前浏览器的版本号、浏览器名称、系统名称。
PS:在服务器端,通过检测用户代理字符串确定用户使用的浏览器是一种比较广为接受的做法。 但在客户端, 这种测试被当作是一种万不得已的做法, 且饱受争议, 其优先级排在能力检测或怪癖检测之后。饱受争议的原因,是因为它具有一定的欺骗性。
document.write(navigator.userAgent); //得到用户代理字符串
Firefox14.0.1
Mozilla/5.0 (Windows NT 5.1; rv:14.0) Gecko/20100101 Firefox/14.0.1
Firefox3.6.28
Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.2.28) Gecko/20120306
Firefox/3.6.28
Chrome20.0.1132.57 m
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/536.11 (KHTML, like Gecko)
Chrome/20.0.1132.57 Safari/536.11
Safari5.1.7
Mozilla/5.0 (Windows NT 5.1) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7
Safari/534.57.2
IE7.0
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR
2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
IE8.0
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR
1.1.4322; .NET CLR 2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
IE6.0
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.1.4322; .NET CLR
2.0.50727; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Opera12.0
Opera/9.80 (Windows NT 5.1; U; zh-cn) Presto/2.10.289 Version/12.00
Opera7.54
Opera/7.54 (Windows NT 5.1; U) [en]
Opera8
Opera/8.0 (Window NT 5.1; U; en)
Konqueror (Linux 集成,基于 KHTML 呈现引擎的浏览器)
Mozilla/5.0 (compatible; Konqueror/3.5; SunOS) KHTML/3.5.0 (like Gecko)
只要仔细的阅读这些字符串, 我们可以发现, 这些字符串包含了浏览器的名称、 版本和所宿主的操作系统。
每个浏览器有它自己的呈现引擎: 所谓呈现引擎, 就是用来排版网页和解释浏览器的引擎。通过代理字符串发现,我们归纳出浏览器对应的引擎:
IE -- Trident, IE8 体现出来了,之前的未体现
Firefox -- Gecko,
Opera -- Presto, 旧版本根本无法体现呈现引擎
Chrome -- WebKit WebKit 是 KHTML 呈现引擎的一个分支,后独立开来
Safari -- WebKit
Konqueror -- KHTML
由上面的情况, 我们需要检测呈现引擎可以分为五大类: IE、 Gecko、 WebKit、 KHTML和 Opera。

var client = function () { //创建一个对象
var engine = { //呈现引擎
ie : false,
gecko : false,
webkit : false,
khtml : false,
opera : false,
ver : 0 //具体的版本号
};
return {
engine : engine //返回呈现引擎对象
};
}(); //自我执行
alert(client.engine.ie); //获取 ie

 
以上的代码实现了五大引擎的初始化工作, 分别给予 true 的初值, 并且设置版本号为 0。
下面我们首先要做的是判断 Opera,因为 Opera 浏览器支持 window.opera 对象, 通过这个对象,我们可以很容易获取到 Opera 的信息。

for (var p in window.opera) { //获取 window.opera 对象信息
document.write(p + "<br />");
}
if (window.opera) { //判断 opera 浏览器
engine.ver = window.opera.version(); //获取 opera 呈现引擎版本
engine.opera = true; //设置真
}

 
接下来,我们通过正则表达式来获取 WebKit 引擎和它的版本号。

else if (/AppleWebKit\/(\S+)/.test(ua)) { //正则 WebKit
engine.ver = RegExp['$1']; //获取 WebKit 版本号
engine.webkit = true;
}

 
然后,我们通过正则表达式来获取 KHTML 引擎和它的版本号。由于这款浏览器基于Linux,我们无法测试。
//获取 KHTML 和它的版本号

else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
engine.ver = RegExp['$1'];
engine.khtml = true;
}

 
下面,我们通过正则表达式来获取 Gecko 引擎和它的版本号。

else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) { //获取 Gecko 和它的版本号
engine.ver = RegExp['$1'];
engine.gecko = true;
}

 
最后,我们通过正则表达式来获取 IE 的引擎和它的版本号。因为 IE8 之前没有呈现引擎,所以,我们只有通过"MSIE"这个共有的字符串来获取。

else if (/MSIE ([^;]+)/.test(ua)) { //获取 IE 和它的版本号
engine.ver = RegExp['$1'];
engine.ie = true;
}

 
上面获取各个浏览器的引擎和引擎的版本号, 但大家也发现了, 其实有些确实是浏览器的版本号。所以,下面,我们需要进行浏览器名称的获取和浏览器版本号的获取。
根据目前的浏览器市场份额, 我们可以给一下浏览器做检测: IE、 Firefox、 konq、 opera、

chrome、safari。
var browser = { //浏览器对象
ie : false,
firefox : false,
konq : false,
opera : false,
chrome : false,
safari : false,
ver : 0, //具体版本
name : '' //具体的浏览器名称
};

 
对于获取 IE 浏览器的名称和版本,可以直接如下:

else if (/MSIE ([^;]+)/.test(ua)) {
engine.ver = browser.ver = RegExp['$1']; //设置版本
engine.ie = browser.ie = true; //填充保证为 true
browser.name = 'Internet Explorer'; //设置名称
}

 
对于获取 Firefox 浏览器的名称和版本,可以如下:

else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
engine.ver = RegExp['$1'];
engine.gecko = true;
if (/Firefox\/(\S+)/.test(ua)) {
browser.ver = RegExp['$1']; //设置版本
browser.firefox = true; //填充保证为 true
browser.name = 'Firefox'; //设置名称
}
}

 
对于获取 Chrome 和 safari 浏览器的名称和版本,可以如下:

else if (/AppleWebKit\/(\S+)/.test(ua)) {
engine.ver = RegExp['$1'];
engine.webkit = parseFloat(engine.ver);
if (/Chrome\/(\S+)/.test(ua)) {
browser.ver = RegExp['$1'];
browser.chrome = true;
browser.name = 'Chrome';
} else if (/Version\/(\S+)/.test(ua)) {
browser.ver = RegExp['$1'];
browser.chrome = true;
browser.name = 'Safari';
}
}

 
PS:对于 Safari3 之前的低版本,需要做 WebKit 的版本号近似映射。而这里,我们将不去深究,已提供代码。
浏览器的名称和版本号, 我们已经准确的获取到, 最后, 我们想要去获取浏览器所宿主的操作系统。

var system = { //操作系统
win : false, //windows
mac : false, //Mac
x11 : false //Unix、Linux
};
var p = navigator.platform; //获取系统
system.win = p.indexOf('Win') == 0; //判断是否是 windows
system.mac = p.indexOf('Mac') == 0; //判断是否是 mac
system.x11 = (p == 'X11') || (p.indexOf('Linux') == 0) //判断是否是 Unix、Linux

 
PS:这里我们也可以通过用户代理字符串获取到 windows 相关的版本,这里我们就不去深究了,提供代码和对应列表。



 



已有 0 人发表留言,猛击->> 这里<<-参与讨论


ITeye推荐



相关 [浏览器] 推荐:

Silk 浏览器:Google? No!

- 橙子 - 爱范儿 · Beats of Bits
前苹果员工, Blogger Chris Espinosa 指出, Amazon 的 Silk 浏览器技术,让 Amazon 不能把自己置于 Google 的控制之下. Silk 在云端为用户组织和优化网页,之后再下载到本地. 这样做的结果是, Amazon 能掌握用户在网络上的一举一动. 不仅仅包括在 Amazon.com 下的订单.

浏览器检测

- - JavaScript - Web前端 - ITeye博客
1.navigator 对象. 由于每个浏览器都具有自己独到的扩展, 所以在开发阶段来判断浏览器是一个非常重要的步骤. 虽然浏览器开发商在公共接口方面投入了很多精力, 努力的去支持最常用的公共功能;但在现实中,浏览器之间的差异,以及不同浏览器的“怪癖”却是非常多的,因此客户端检测除了是一种补救措施,更是一种行之有效的开发策略.

浏览器缓存机制

- Leo Pay - Learning Correcting Improving
Cache-Control 是最重要的规则. 这个字段用于指定所有缓存机制在整个请求/响应链中必须服从的指令. 这些指令指定用于阻止缓存对请求或响应造成不利干扰的行为. 缓存指令是单向的,即请求中存在一个指令并不意味着响应中将存在同一个指令. cache-control 定义是:Cache-Control = "Cache-Control" ":" cache-directive.

浏览器进化史

- Hao Zeng - 爱范儿 · Beats of Bits
这张图非常直观,纵轴是浏览器存在的时间线,横轴代表使用此浏览器的用户数量. 出现在图片中的浏览器包括:Netscape、Opera、IE、Firefox、Safari 和 Chrome. Netscape:1994 年诞生,1995 年用户基数达到最大(2.x 版本). 1998 年 Netscape 被创业杀手 AOL 收购,再加上微软的冲击,逐渐走向衰败,2008 年彻底终结.

百度浏览器评测

- 溪梦 - 月光博客
  百度今年在客户端方面的动作不断,目前已经推出了百度输入法、百度电脑管家、百度安全卫士、百度影音,百度压缩软件,而现在,百度客户端领域的重要产品百度浏览器已经进入了测试阶段,不久后将正式对外发布.   百度在其公关稿里称:“百度浏览器具备以下几点特性:第一,整合百度平台的热门应用,使用户一键触达;第二,采用沙箱安全技术将用户电脑与病毒木马隔离;第三,融合百度搜索技术的智能地址栏;第四,界面设计简洁易操作……百度希望通过浏览器的改进,推动互联网的良性发展,吸引更多的用户来使用互联网,增进使用的频度与时长,最终推动搜索这个媒体平台的发展和巩固.

最新浏览器评测

- John - Solidot
Tom's Hardware发布了最新的浏览器评测,在Windows 7 和Mac OS X Lion系统上分别对Chrome 13、Firefox 6、IE9、Opera 11.50和Safari 5.1执行了近40项测试. 测试结果是:Windows 7上的排名依次是Chrome 13、Firefox 6、IE9、Opera 11.50,Safari 5.1;Mac OS X上是Safari,Chrome,Opera,Firefox.

appcache的浏览器限制

- - 前端观察
appcache(之前的manifest)是html5的一个特性,用来实现浏览器端的资源缓存,是webapp的一个重要工具. 虽然大部分浏览器的最新版都它提供了支持,但是各浏览器的实现却有些差异,我们来看一下~~. 数据来源: browserscope. 可以看出,桌面端的浏览器除了IE10都没有限制,移动端的基本都有各种限制.

IE 浏览器的创新

- - 博客 - 伯乐在线
译者按:IE 曾是 web 创新的先驱,但最近几年因为对 web 标准的支持落后于其他 浏览器以及低版本 IE 的各种 bug 而被人诟病. Zakas 带我们回顾了 IE 在 web 发展过程中扮演的辉煌角色,让我们能以一个更客观的眼光来看待 IE. 看完这篇文章,也许大家都会对 IE 浏览器有一定的改观,这也是我翻译这篇文章的目的.

浏览器性能测试

- - Taobao QA Team
浏览器作为一个浏览网页的平台,自身的性能直接影响网页的解析速度、渲染,而浏览器的性能一般又是由浏览器的内核来决定. 虽然浏览器的评测方法有很多,但是权威的浏览器性能测试方法主要有以下几种:. Acid3测试是检测浏览器与Web标准兼容性的主要方法,也是目前行业中最权威的测试. Acid3是由网页标准计划小组(Web Standards Project, WaSP)设计,测试焦点集中在ECMAScript、DOM Level 3、Media Queries和data: URL,浏览器开启 http://acid3.acidtests.org/测试页面后,页面会不断加载功能、直接给予分数.

跨浏览器获取 Geolocation

- - 幸福收藏夹
年末,这一年的工作都差不多搞完了. 因为下一年的目标是 HTML5 应用,所以在做一些小尝试. 距离 第一次在支付宝分享 HTML5,已经有一年半了,时间好快,就这么过去了. 前几天和同事聊到可能可以做个基于 LBS 的服务,回到家里就尝试了一下 HTML5 的 Geolocation API. 翻开一年前写的文档,很快就熟悉起来.