16.浏览器检测

浏览器检测

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

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

一、navigator对象
navigator对象最早由Netscap Navigator2.0引入的navigator对象，现在已经称为识别客户端浏览器的实施标准。
与之前的BOM对象一样，每个浏览器中的navigator对象也都有一套自己的属性。

navigator对象的属性或方法

属性或方法 说明 IE Firefox Safari/Chrome Opera
appCodeName 浏览器名，通常是Mozilla 3.0+ 1.0+ 1.0+ 7.0+
appName 完整的浏览器名称 3.0+ 1,0+ 1.0+ 7.0+
appMinorVersion 此版本信息 4.0+ - - 9.5+
appVersion 浏览器版本，一般不与实际对应 3.0+ 1.0+ 1.0+ 7.0+
buildID 浏览器编译版本 - 2.0+ - -
cookieEnabled 表示cookie是否启用 4.0+ 1.0+ 1.0+ 7.0+
cpuClass 客户端使用的cpu类型 4.0+ - - -
javaEnabled() 表示是否启用了java 4.0+ 1.0+ 1.0+ 7.0+
language 浏览器的主语言 - 1.0+ 1.0+ 7.0+
mimeTypes 注册的MIME类型数组 4.0+ 1.0+ 1.0+ 7.0+
onLine 表示浏览器是否链接了因特网 4.0+ 1.0+ - 9.5+
opsProfile 似乎早就不用了，无法查询 4.0+ - - -
…… …… …… …… …… ……

1.浏览器及版本号

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

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

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

调用方式 说明
BrowserDetect.browser 浏览器的名称，例如Firefox，IE
BrowserDetect.version 浏览器的版本，比如，7、11
BrowserDetect.OS 浏览器所宿主的操作系统，比如windows、Linux

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

属性 含义
name 插件名
filename 插件的磁盘文件名
length plugins数组的元素个数
description 插件的描述信息

//列出所有的插件名
for(var i = 0 ; i < navigator.plugins.length;i++){
document.write('插件名：'+navigator.plugins[i].name + '<br />');
document.write('文件名：'+navigator.plugins[i].filename + '<br />');
document.write('描述信息：'+navigator.plugins[i].description + '<br />');
document.write('<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.Active X
IE浏览器没有插件，但是提供了ActiveX控件。ActiveX控件一种在Web页面中嵌入对象或组件的方法。
由于在JS中，我们无法把所有已安装的ActiveX控件遍历出来，但是我们还是可以去检验是否安装了此控件。

//检测IE中的控件
function hasIEPlugin(){
try{ //这里叫尝试着去执行一段代码如果有误就去执行catch
new ActiveXObject(name) //这里的name必须是控件的位置标识符ID
return true; //如果这里new成功了，没有产生错误，那么就不去执行catch
}catch(e){
return false; //如果new失败了，就执行catch里面的语句
}
}

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

//跨浏览器检测Flash是否存在
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;
}

function hasIEPlugin(){
try{ //这里叫尝试着去执行一段代码如果有误就去执行catch
new ActiveXObject(name) //这里的name必须是控件的位置标识符ID
return true; //如果这里new成功了，没有产生错误，那么就不去执行catch
}catch(e){
return false; //如果new失败了，就执行catch里面的语句
}
}

function hasFlash(){
//首先先去检测非IE的浏览器

var result = hasPlugin('Flash'); //如果返回true，说明检测到了，并且不是IE浏览器
if(!result){ //如果没有检测到，说明这个浏览器没有flash插件
result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash');
}
return result;
}
alert(hasFlash);

 

5.MIME类型
MIME类型是指多用途因特网邮件扩展。它是通过因特网发送邮件消息的标准格式。现在也被用于在因特网中交换
各种类型的文件。

PS：mimeType[]数组在IE中不会产生输出。

mimeType对象的属性
属性 含义
type MIME类型名
description MIME类型的描述信息
enabledPlugin 指定MIME类型配置好的plugin对象引用
suffixes MIME类型所有可能的文件扩展名

//遍历非IE下所有MIME类型信息
for(var i = 0 ; i<navigator.mimeType.length ; i++){
if(navigator.mimeType[i].enabledPlugin != null){
document.write('<dl>');
document.write('<dd>类型名称：'+navigator.mimeType[i].type+'</dd>');
document.write('<dd>类型引用：'+navigator.mimeType[i].enabledPlugin.name+'</dd>');
document.write('<dd>类型引用：'+navigator.mimeType[i].description+'</dd>');
document.write('<dd>类型引用：'+navigator.mimeType[i].suffixes+'</dd>');
document.write('</dl>');
}
}

二、客户端检测
客户端检测一共分为三种，分别为：能力检测、怪癖检测和用户代理检测，通过这三种检测方案，我们可以充分
的了解当前浏览器所处系统、所支持的语法、所具有的特殊性能。

1.能力检测
能力检测又称为特性检测，检测的目标不是识别特定的浏览器，而是识别浏览器的能力。能力检测不必估计特定
的浏览器，只需要确定当前浏览器是否支持特定的能力，就可以给出可行的解决方案。

//BOM章节的一段程序
var width = window.innerWidth; //这里要加window，因为IE会无效
if(typeof width !='number'){
if(document.compatMode == 'CSS1Compat'){ //如果使用IE，就使用document
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); //得到用户代理字符串

每个浏览器都有它自己的呈现的引擎：所谓呈现引擎，就是用来排版网页和解释浏览器的引擎。通过代理字符串
发现，我们归纳出浏览器对应的引擎；
IE--Trident； IE8体现出来了，之前的未体现
Firefox--Gecko；
Opera--Presto； 旧版本根本无法体现呈现引擎
Chrome--WebKit WebKit是KHTML呈现引擎的一个分支，后独立开来
Safari--WebKit
Konquetor--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