javaScript基础：浏览器检测

一、为什么需要浏览器检测？

不同的浏览器除了支持最常用的公共功能外，每个浏览器都具有自己独到的扩展 。由于浏览器之间的差异 ,,所以在开发阶段就需要判断浏览器是什么浏览器，根据不同的浏览器来做相应的开发，因此浏览器检测除了是一种补救措施,更是一种行之有效的开发策略。 

二、navigator对象

navigator对象最早由Netscape Navigator2.0引入的navigator对象,现在已经成为识别客户端浏览器的事实标准。

navigator对象通常用于检测浏览器与操作系统的版本

• navigator，中文"导航器"
• navigator对象是window对象的属性
• 由于navigator没有统一的标准，因此各个浏览器都有自己不同的navigator版本，这里只介绍最普遍支持且最常用的

 

常用的navigator属性

• appCodeName -- 浏览器代码名的字符串表示
• appName -- 官方浏览器名的字符串表示
• appVersion -- 浏览器版本信息的字符串表示
• cookieEnabled -- 如果启用cookie返回true，否则返回false
• javaEnabled -- 如果启用java返回true，否则返回false
• platform -- 浏览器所在计算机平台的字符串表示
• plugins -- 安装在浏览器中的插件数组
• taintEnabled -- 如果启用了数据污点返回true，否则返回false
• userAgent -- 用户代理头的字符串表示

navigator中最重要的是userAgent属性，返回包含浏览器版本等信息的字符串，其次cookieEnabled也很重要，使用它可以判断用户浏览器是否开启cookie。

1.navigato对象的常用属性

//navigator对象的常用属性
alert(navigator.appName);//浏览器名称
alert(navigator.appVersion);//浏览器版本号
alert(navigator.platform);//浏览器所在的系统
alert(navigator.userAgent);//浏览器用户代理字符串

document.write(navigator.userAgent);//得到用户代理字符串Firefox14.0.1

Firefox/47.0

Mozilla/5.0 (Macintosh; Intel Mac OS X 10.11; rv:47.0) Gecko/20100101 Firefox/47.0

这些字符串包含了浏览器的名称 、版本和所宿主的操作系统。 

不同的浏览器支持的功能 、属性和方法各有不同 。比如IE和 Firefox显示的页面可能就会有所略微不同。 一般不用上述方法来判断浏览器的类型。

2.浏览器嗅探器

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

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

需要导入文件

 <script type="text/javascript" src = "browserdetect.js"></script>

简单使用

//浏览器嗅探器使用 在Firefox浏览器下测试
alert(BrowserDetect.browser);//浏览器名称。firefox
alert(BrowserDetect.version);//版本号 47
alert(BrowserDetect.OS);//所在的系统 mac

3、插件和控件检测

插件是一类特殊的程序 。他可以扩展浏览器的功能 ,通过下载安装完成 。比如,在线音乐、视频动画等等插件。 

IE浏览器没有插件,但提供了ActiveX控件。ActiveX控件一种在Web页面中嵌入对象或组件的方法。 

需要检查哪种控件,必须先获取控件的标识符。 

查看已经安装的插件

function allPlugins(){
    var plugins = navigator.plugins;//plugins属性，存放浏览器已安装的所有插件的数组
    alert(plugins.length);//已安装的插件的个数
    for(var i = 0;i<plugins.length;i++){
        var plugin = plugins[i];//拿到已经安装的插件
        var name = plugin.name;//插件的名称
        var fileName = plugin.filename;//插件的磁盘文件名
        var description = plugin.description;//插件的描述信息
        alert(name +'\n' + fileName + '\n' + description);//打印信息
    }
}

allPlugins();

检查是否安装某个插件

function hasPlugin(pluginName){
    var lowPluginName = pluginName.toLowerCase();//将传进来的插件名改成小写
    var plugins = navigator.plugins;
    for(var i = 0;i<plugins.length;i++){
        var plugin = plugins[i];
        var name = plugin.name;
        if(name.toLowerCase().indexOf(lowPluginName)>-1){
            return true;
        }
    }
    return false;
}
alert(hasPlugin('Flash'));//true
alert(hasPlugin('Java'));//true
alert(hasPlugin('aaa'));//false

检查IE中的控件

//检查IE中的控件的方法
function hasActive(activeName){
    try{
        new ActiveXObject(activeName);
        return true;
    }
    catch (e){
        return true;
    }
}
alert(hasActive('Flash'));

通过以上定义的方法来进行跨浏览器检测

function hasPluginOrActive(name){
    if (hasActive(name)) return true;//判断是否有某个插件
    if (hasPlugin(name)) return true;//判断是否有某个控件
    return false;//都没有的话返回false；
}
alert(hasPluginOrActive('Flash'));

三、客户端检测

1、能力检测

能力检测不是检测浏览器的类型，而是检测浏览器是否具有某项能力

所以能力检测不必估计特定的浏览器 ,只需要确定当前的浏览器是否支持特定的能力 ,就可以给出可行的解决方案。 

//是否支持 innerWidth的检测(IE浏览器是不支持innerWidth的)
function getWidth(){
    var width = innerWidth;//非IE浏览器支持innerWidth属性
    if(typeof width != 'Number'){//ie浏览器支持的属性
        //ie浏览器又分为标准模式和非标准模式
       //ie浏览器的标准模式支持
        if(document.documentMode == 'CSS1Compat'){
            width = document.documentElement.clientWidth;
        }
        else{
            //非标准模式支持
            width = document.body.clientWidth;
        }
    }
    return width;
}
alert(getWidth());

2、怪癖检测

怪癖检测的目标是识别浏览器的特殊行为  

但与能力检测确认浏览器支持什么能力不同,怪癖检测是想要知道浏览器存在什么缺陷(bug)。 

//怪癖检测
var box = {
    toString : function(){}//创建一个 toString(),和原型中重名了
};
for(var obj in box){
    alert(obj);//其它浏览器toString IE 浏览器的一个 bug,不识别了 此时就需要对IE浏览器进行处理
}

3、用户代理检测

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

以下代码只是提供一个思路： 

var ua = navigator.userAgent;//用户代理字符串
var pl = navigator.platform;//获得平台

var client = function(){
    //初始化浏览器引擎对象
    var engine = {
        ie:false,
        opera:false,
        webkit:false,
        gecko:false,
        khtml:false,
        ver : 0,
        name : ''
    };

    //初始化浏览器对象
    var browser = {
        ie:false,
        opera: false,
        chrome : false,
        safari : false,
        firefox : false,
        ver : 0,
        name : ''

    };
    //初始化系统对象
    var system = {
        win : false,
        mac : false,
        x11 : false,
        name : ''
    };

    //检测区域：目的是将检测到的结果给上述三个对象赋值
    if(window.opera){//1.Opera
        //引擎检测
        engine.opera = true;
        engine.ver = window.opera.version();
        engine.name = 'opera';
        //浏览器检测
        browser.ie = true;
        browser.ver = engine.ver;
        browser.name = 'Opera';
    }
    else if(/AppleWebKit\/(\S+)/.test(ua)){//2.webkit
        // 引擎检测
        engine.webkit = true;
        engine.ver = RegExp['$1'];
        engine.name = 'webkit';
        //浏览器检测
        if(/Chrome\/(\S+)/.test(ua)){//chrome浏览器
            browser.chrome = true;
            browser.name = 'Chrome';
            browser.ver = RegExp['$1'];
        }
        else if(/Version\/(\S+)/.test(ua)){//Safari浏览器
            browser.safari = true;
            browser.name = 'Safari';
            browser.ver = RegExp['$1'];
        }
    }
    else if(/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){//3.gecko引擎

        engine.gecko = true;
        engine.ver = RegExp['$1'];
        engine.name = 'gecko';
        if(/Firefox\/(\S+)/.test(ua)){//Firefox浏览器
            browser.firefox = true;
            browser.name = 'FireFox';
            browser.ver = RegExp['$1'];
        }
    }
    else if(/MSIE ([^;]+)/.test(ua)){//4.ie引擎
        engine.ie = true;
        engine.ver = RegExp['$1'];
        engine.name = 'ie';
    }

    //检测区域：系统检测
    if(pl.indexOf('Win') == 0){//1、确定是windows系统
        system.win = true;
        system.name = 'Windows';
    }
    else if(pl.indexOf('Mac') == 0){//2、确定是Mac系统
        system.mac = true;
        system.name = 'Maccintosh';
    }
    else if(pl == 'X11'|| pl.indexOf('Linux') == 0){//3、确定是Linux系统
        system.mac = true;
        system.name = 'Linux';
    }

    //返回一个对象：这个对象包含三个对象 就是上边初始化的 引擎 浏览器 系统 对象
    return {
        engine  : engine,
        browser : browser,
        system  : system
    };
}();

//打印结果
var alertFun = function (){
    alert('引擎名:' + client.engine.name  + '版本号:' + client.engine.ver  +
          '\n' +
          '浏览器:' + client.browser.name + '版本号:' + client.browser.ver +
          '\n' +
          '系统名:' + client.system.name
    );
};

if(client.engine.opera){
    alertFun();
}
else if (client.engine.webkit){
    alertFun()
}
else if (client.engine.gecko){
    alertFun();
}
else if (client.engine.ie){
    alertFun();
}