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

  • //不同的浏览器支持的功能、属性和方法各有不同。比如IE和Firefox,可能就会有所略微不同。
alert('浏览器名称：' +navigator.appName);
alert('浏览器版本：' +navigator.appVersion);
alert('浏览器用户代理字符串：' +navigator.userAgent);
alert('浏览器所在的系统：' +navigator.platform);

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

  • BrowserDetect.browser
    		浏览器的名称，例如Firefox，IE
    BrowserDetect.version
    		浏览器的版本，比如，7、11
    BrowserDetect.OS
    		浏览器所宿主的操作系统，比如Windows、Linux

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

  • 属性
    		含义
    name
    		插件名
    filename
    		插件的磁盘文件名
    length
    		plugins数组的元素个数
    description
    		插件的描述信息
  • //列出所有的插件名
for (var i = 0; i <navigator.plugins.length; i ++) {     
       document.write(navigator.plugins[i].name+ '<br />');
}
 
//检测非IE浏览器插件是否存在
function hasPlugin(name) {
       varname = name.toLowerCase();
       for(var i = 0; i < navigator.plugins.length; i ++) {
              if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1) {
                     returntrue;
              }
       }
       returnfalse;
}
 
alert(hasPlugin('Flash'));                                    //检测Flash是否存在
alert(hasPlugin('java'))                                      //检测Java是否存在

  • 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'));      

//ShockwaveFlash.ShockwaveFlash是IE中代表FLASH的标识符，必须先获取它的标识符。
 
//跨浏览器检测是否支持Flash
function hasFlash() {
       varresult = hasPlugin('Flash');
       if(!result) {
              result = hasIEPlugin('ShockwaveFlash.ShockwaveFlash');
       }
       returnresult;
}
 
//检测Flash
alert(hasFlash());

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

  • //遍历非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>')
    }
}

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

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

  • 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
       }
}
 
//第一个是否支持innerWidth的检测，第二个是否是标准模式的检测，这两个都是能力检测。

  • 怪癖检测 与能力检测类似，怪癖检测的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同，怪癖检测是想要知道浏览器存在什么缺陷(bug)。bug一般属于个别浏览器独有，在大多数新版本的浏览器被修复。

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

  •     用户代理代理检测，主要通过navigator.userAgent来获取用户代理字符串的，通过这组字符串，我们来获取当前浏览器的版本号、浏览器名称、系统名称。用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。在每一次HTTP请求过程中，用户代理字符串是作为响应首部发送的，而且该字符串可以通过JavaScript的navigator.userAgent属性访问。

  • 每个浏览器有它自己的呈现引擎：所谓呈现引擎，就是用来排版网页和解释浏览器的引擎。通过代理字符串发现，我们归纳出浏览器对应的引擎：

    IE -- Trident，      IE8体现出来了，之前的未体现

    Firefox -- Gecko，

    Opera -- Presto，  旧版本根本无法体现呈现引擎

    Chrome -- WebKit   WebKit是KHTML呈现引擎的一个分支，后独立开来

    Safari -- WebKit

    Konqueror -- KHTML

  • var client = function () {					//创建一个对象
	var engine = {                          //引擎
		ie : false,			//这个属性用于确定是否是IE引擎	
		gecko : false,
		webkit : false,
		khtml : false,
		opera : false,
        	ver : 0                        //引擎的版本
	};	
	
	var browser = {                        //浏览器
		ie : false,
		firefox : false,
		chrome : false,
		safari : false,
		opera : false,		
		ver : 0,                       //浏览器的版本号		
		name : ''                      //浏览器通用名称
	};	
	var system = {                         //系统
		win : false,
		mac : false,
		x11 : false,	
		sysname : ''                    //系统名称
	};
	
	//核心检测程序区
	var ua = navigator.userAgent;
	var p = navigator.platform;
	
	if (p.indexOf('Win') == 0) {
		system.win = true;		        //用于确定是windows系统
		system.sysname = 'Windows';
	} else if (p.indexOf('Mac') == 0) {
		system.mac = true;		        //用于确定是Mac系统
		system.sysname = 'Macintosh';
	} else if (p == 'X11' || p.indexOf('Linux') == 0) {
		system.x11 = true;			//用于确定是Linux系统
		system.sysname = 'Linux';
	}	
	
	if (window.opera) {
		engine.opera = browser.opera = true;	//表示确定opera引擎
		engine.ver = browser.ver = window.opera.version();
		browser.name = 'Opera';
	} else if (/AppleWebKit\/(\S+)/.test(ua)) {
		engine.webkit = true;			//表示确定webkit引擎
		engine.ver = RegExp['$1'];
		if (/Chrome\/(\S+)/.test(ua)) {
			browser.chrome = true;
			browser.ver = RegExp['$1'];
			browser.name = 'Chrome';
		} else {
			browser.safari = true;
			if (/Version\/(\S+)/.test(ua)) browser.ver = RegExp['$1'];
			browser.name = 'Safari';
		}
	} else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
		engine.gecko = true;			//表示确定gecko引擎
		engine.ver = RegExp['$1'];
		if (/Firefox\/(\S+)/.test(ua)) {
			browser.firefox = true;
			browser.ver = RegExp['$1'];
			browser.name = 'Firefox';
		}
	} else if (/MSIE ([^;]+)/.test(ua)) {
		engine.ie = browser.ie = true;						//表示确定ie引擎
		engine.ver = browser.ver = RegExp['$1'];
		browser.name = 'Internet Explorer';
	}
	
	return {		//返回一个对象，可以同时返回引擎，浏览器和系统的对象							
		engine : engine,    //前一个engine是属性，后一个engine是对象值
		browser : browser,
		system : system
	}
	
}();							//自我执行，并赋值

alert(client.system.sysname + '|' +client.browser.name + client.browser.ver);