JavaScript浏览器检测之客户端检测

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

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
        }
    }
    alert(width);

上面其实有两块地方使用了能力检测，第一个就是是否支持 innerWidth 的检测，第二个就是是否是标准模式的检测，这两个都是能力检测。

2.怪癖检测(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 CLR2.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 CLR1.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 CLR2.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 体现出来了，IE6和IE7的未体现
　　Firefox -- Gecko，
　　Opera -- Presto， 旧版本根本无法体现呈现引擎
　　Chrome -- WebKit WebKit 是 KHTML 呈现引擎的一个分支，后独立开来
　　Safari -- WebKit
　　Konqueror -- KHTML

由上面的情况，我们需要检测呈现引擎可以分为五大类：IE、Gecko、WebKit、KHTML和 Opera。

首先初始化五大类的引擎，分别给予 false 的初值，并且设置版本号为 0

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

开始检测浏览器的引擎：

var client = function () {                 //创建一个对象，自我执行
        var engine = { //呈现引擎
            ie : false,
            gecko : false,
            webkit : false,
            khtml : false,
            opera : false,
            ver : 0 //具体的版本号
        };
        //核心检测区
        var ua = navigator.userAgent;

        if (window.opera) {                         //判断 opera 浏览器
            engine.opera = true;                     //设置真，表示确认是opera引擎
            engine.ver = window.opera.version();     //获取 opera 呈现引擎版本
        }else if (/AppleWebKit\/(\S+)/.test(ua)) {                 //正则 WebKit
            engine.webkit = true;
            engine.ver = RegExp[‘$1‘];                             //获取 WebKit 版本号
        }else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {         //获取 Gecko 和它的版本号
            engine.ver = RegExp[‘$1‘];
            engine.gecko = true;
        }else if (/MSIE ([^;]+)/.test(ua)) { //获取 IE 和它的版本号
            engine.ie = true;
            engine.ver = RegExp[‘$1‘];
        }else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
            engine.ver = RegExp[‘$1‘];
            engine.khtml = true;
        }

        return {
            engine : engine //返回呈现引擎对象
        };
    }(); 

    if(client.engine.opera){
        alert("目前使用的是opera浏览器，版本号为："+client.engine.ver);
    }else if(client.engine.WebKit){
        alert("WebKit引擎的版本号为："+client.engine.ver);
    }else if(client.engine.gecko){
        alert("Gecko引擎的版本号为："+client.engine.ver);
    }else if(client.engine.ie){
        alert("ie引擎的版本号为："+client.engine.ver);
    }else if(client.engine.khtml){
        alert("KHTML引擎的版本号为："+client.engine.ver);
    }

有解释 的部分：

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

    //判断 Opera：因为 Opera 浏览器支持 window.opera 对象，通过这个对象，我们可以很容易获取到 Opera 的信息。
    for (var p in window.opera) {                 //获取 window.opera 对象信息
        document.write(p + "<br />");
    }
    if (window.opera) {                         //判断 opera 浏览器
        engine.opera = true;                     //设置真，表示确认是opera引擎
        engine.ver = window.opera.version();     //获取 opera 呈现引擎版本
    }

    //通过正则表达式来获取 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;
    }

    //通过正则表达式来获取 IE 的引擎和它的版本号。因为 IE8 之前没有呈现引擎，所以，我们只有通过"MSIE"这个共有的字符串来获取。
    else if (/MSIE ([^;]+)/.test(ua)) { //获取 IE 和它的版本号
        engine.ver = RegExp[‘$1‘];
        engine.ie = true;
    }

    //通过正则表达式来获取 Gecko 引擎和它的版本号。
    else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) { //获取 Gecko 和它的版本号
        engine.ver = RegExp[‘$1‘];
        engine.gecko = true;
    }

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

有解释的部分

//对于获取 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‘;
        }
    }
var client = function () {                 //创建一个对象，自我执行
        var browser = {             //浏览器对象
        ie : false,
        firefox : false,
        konq : false,
        opera : false,
        chrome : false,safari : false,
        ver : 0,                 //具体版本
        name : ‘‘                 //具体的浏览器名称
    };
         //核心检测区
        var ua = navigator.userAgent;

        //对于获取 IE 浏览器的名称和版本，可以直接如下：
        if (/MSIE ([^;]+)/.test(ua)) {
            engine.ver = browser.ver = RegExp[‘$1‘]; //设置版本
            engine.ie = browser.ie = true; //填充保证为 true
            browser.name = ‘Internet Explorer‘; //设置名称
        }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‘; //设置名称
            }
        }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‘;
            }
        }

        return {
            browser:browser
        };
    }(); 

    if(client.browser.firefox){
        alert(client.browser.name+client.browser.ver);
    }

获取浏览器所宿主的操作系统。

　　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
时间： 2024-11-07 14:48:35

JavaScript浏览器检测之客户端检测的相关文章

JavaScript高级程序设计之客户端检测

浏览器检测,是个很让人头痛但又必须要考虑的一个问题.毕竟市面上的浏览器厂商众多,虽然有些标准化的东西约束着他们,但是有些东西,他们还是各自按自己的意愿来.这其中以IE浏览器最为突出,它几乎可以被称之为万恶之源. 浏览器检测的方法有很多,这里介绍的可能并不是全部,但基本上都是比较常用的方法.下边我就来详细介绍一下高设上提供的浏览器检测的方法. 能力检测 能力检测比较简单,就是判断浏览器支不支持这个方法.例:if(Object.assign){ ...... }.这种方法最简单,也最常用,但缺点也很

从客户端检测到有潜在危险的Request.Form 值

asp.net开发中,经常遇到"从客户端检测到有潜在危险的Request.Form 值"错误提示,很多人给出的解决方案是: 1.web.config文档<system.web>后面加入这一句: <pages validaterequest="false"/> 示例: <?xml version="1.0" encoding="gb2312" ?> <configuration> 

js客户端检测

1.能力检测的基本模式如下: //能力检测的基本模式 if (object.propertyInQuestion) { // 使用object.propertyInQuestion } throw new Error("No way to retrieve element") // 如检查sort是不是函数(存在) fucntion isSortable(object) { return typeof object.sort == "function"; } 在可能

javascript高级程序设计 第九章-- 客户端检测

javascript高级程序设计 第九章-- 客户端检测 客户端检测是javascript开发中最具争议的一个话题,由于浏览器间存在差别,通常需要根据不同浏览器的能力分别编写不同的代码.有下列常使用的客户端检测方法:能力检测:在编写代码之前先检测特定浏览器的能力.例如,脚本在调用某个函数之前,可能要先检测该函数是否存在.这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来,让他们把注意力集中到相应的能力是否存在上.能力检测无法精确地检测特定的浏览器和版本.怪癖检测:怪癖实际上是浏览器中存

JavaScript高级程序设计学习笔记第九章--客户端检测

1.能力检测:能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力.(我的理解就是识别浏览器能做什么不能做什么) 2.怪癖检测:目标是识别浏览器的特殊行为.但与能力检测确认浏览器支持什么能力不同,怪癖检测是想要知道浏览器存在什么缺陷(“怪癖”也就是 bug). 3.用户代理检测:争议最大的一种客户端检测技术.用户代理检测通过检测用户代理字符串来确定实际使用的浏览器.在每一次 HTTP 请求过程中,用户代理字符串是作为响应首部发送的,而且该字符串可以通过 JavaScript 的 naviga

JavaScript学习笔记（十）---- 客户端检测和DOM

客户端检测: (一)能力检测 能力检测目的是识别浏览器的能力. 在编写代码之前先检测特定浏览器的能力.例如,脚本在调用某个函数之前,可能要先检测该函数是否存在. (二)怪癖检测 怪癖实际上是浏览器实现中存在的bug.怪癖检测通常涉及到运行一小段代码,然后确定浏览器是否存在某个怪癖. (三)用户代理检测 通过检测用户代理字符串来识别浏览器. DOM (一)节点层次 在HTML页面中,文档元素使用都是<html>元素.在XML中,没有预定义的元素,因此任何元素都可能成为文档元素. 每一段标记都可以

javascript客户端检测 记录一些“怪癖”

因为市面上多种浏览器之间的差异,和不同浏览器的“怪癖”,所以我们在开发时可能需要客户端检测,确保自己的代码能顺利的在全部浏览器上运行 第一种最常用的客户端检测——能力检测.能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力 if(object.propertyInQuestion){ //使用object.propertyInQuestion } 就是在运行代码之前检查浏览器是否支持要用到的方法或属性,如果不能就运行针对性的代码 第二种客户端检测——“怪癖”检测的目标是识别浏览器的特殊行为

JavaScript学习--Item36 客户端检测技术

JavaScript 客户端检测 JavaScript 客户端检测是指通过javascript,判断客户端的环境,诸如使用的浏览器和操作系统.客户端检测是一种行之有效的开发策略.但不到万不得已,就不要使用客户端检测.先设计通用的方案,然后根据浏览器之间的差异和各自的怪癖quirky,再使用特定于浏览器的技术增强该方案. user-agent字符串检测法是最原始的浏览器检测方式,每个访问网站的程序都必须提供一个user-agent字符来向服务器确定他的身份.navigator对象包含一些浏览器信息

读书时间《JavaScript高级程序设计》四：BOM，客户端检测

隔了一段时间,现在开始看第8章. 第8章:BOM BOM提供了很多对象,用于访问浏览器的功能.BOM的核心对象是window,它表示浏览器的一个实例. window对象是通过javascript访问浏览器窗口的一个接口,又是ECMAScript中的Global对象. 所有在全局作用域声明的变量.函数都是window对象的属性和方法. 1. 窗口关系,框架 每个框架都有window对象,并在frames集合中 每个window对象都有name属性,其中包含框架名称 top对象始终指向最高(最外)层