浏览器检测navigator 对象

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

 

 

 

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

3.检测插件
插件是一类特殊的程序。他可以扩展浏览器的功能，通过下载安装完成。比如，在线音
乐、视频动画等等插件。
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) {
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 {                                  //这里叫做尝试着去执行一段代码，如果有误，就去执行catch
        new ActiveXObject(name)            //这里的name必须是控件的唯一标识符ID
        return true;                       //如果new 成功了，没有产生错误，那么就不去执行catch
    } catch (e) {
        return false;                      //如果new 失败了，就执行catch里面的语句
    }
}

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());

 二、客户端检测

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

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

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 一般属于个别浏览器独有，在大多数新版本的浏览器被修复。

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

3.用户代理检测

用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。

用户代理代理检测，主要通过navigator.userAgent 来获取用户代理字符串的，通过这组
字符串，我们来获取当前浏览器的版本号、浏览器名称、系统名称。

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。

//用户代理字符串
document.write(navigator.userAgent);
document.write('<br />');
document.write(navigator.platform);

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;                        //用于确定是Mac系统
        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);