资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/JavaScript 客户端检测——“用户代理检测”的注意要点

JavaScript 客户端检测——“用户代理检测”的注意要点

instein / 2369人阅读

摘要：用户代理检测通过的属性访问。在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常用的做法但在客户端，用户代理检测一般为最低优先级。目前只要检测五大呈现引擎即可和。

用户代理检测

通过 JavaScript 的 navigator.userAgent 属性访问。在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常用的做法；但在客户端，用户代理检测一般为最低优先级。

用户代理字符串检测技术

首先要确定你需要多么具体的浏览器信息。然后在使用代码进行检测。

识别呈现引擎 原理

确切知道浏览器的名字和版本号不如确切知道它实用的是什么呈现引擎。目前只要检测五大呈现引擎即可：IE、Gecko、WebKit、KHTML 和 Opera。（为了不在全局作用域中添加多余的变量，我们将使用模块增强模式来封装检测脚本。）基本代码如下：

var client = function(){

    var engine = {
        
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,
        
        ver: null //完整的版本
    };
    
    return {
        engine: engine
    };
}();

做这样的区分可以支持像下面这样编写的代码：

if(client.engine.ie){
    //针对 IE 的代码
}else if (client.engine.gecko > 0){
    if (client.engine.ver == "1.8.1"){
        //针对这个版本执行某些操作
    }
}
检测顺序

关键是检测顺序要正确。由于用户代理字符串存在很多不一致的地方，如果检测顺序不对，很可能导致检测结果不正确。

第一步要识别 Opera：

if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}

第二步是 WebKit (检测字符串中的“AppleWebKit”)：

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit/(S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}

第三步是 KHTML：

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit/(S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/KHTML/(S+)/.test(ua) || /Konqueror/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}

第四步是 Gecko：

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit/(S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/KHTML/(S+)/.test(ua) || /Konqueror/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}else if (/rv:([^)]+)) Gecko/d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
}

第五步是 IE：

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = window.opera.version();
    engine.opera = parseFloat(engine.ver);
}else if (/AppleWebKit/(S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
}else if (/KHTML/(S+)/.test(ua) || /Konqueror/([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.khtml = parseFloat(engine.ver);
}else if (/rv:([^)]+)) Gecko/d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
}else if (/MSIE ([^;]+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.ie = parseFloat(engine.ver);
}
正则表达式

各正则表达式如下：

(useragentstring.com这里列出了各种浏览器的版本以及用户代理字符串。)

opera: 
不需要正则表达式，使用window.opera.verson()；
Webkit:

Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/41.0.2228.0 Safari/537.36

AppleWebKit/(S+) //AppleWebKit/537.36
KHTML:

Mozilla/5.0 (X11; Linux) KHTML/4.9.1 (like Gecko) Konqueror/4.9

Mozilla/5.0 (compatible; Konqueror/4.5; FreeBSD) KHTML/4.5.4 (like Gecko)

对于第一种：

KHTML/(S+) //KHTML/4.9.1
Konqueror/(S+) //Konqueror/4.9

对于第二种：

KHTML/(S+) //KHTML/4.5.4
Konqueror/([^;]+) //Konqueror/4.5
Gecko:

Mozilla/5.0 (Windows NT 6.1; WOW64; rv:40.0) Gecko/20100101 Firefox/40.1

rv:([^)]+)) Gecko/d{8} //rv:40.0) Gecko/20100101
IE:

Mozilla/5.0 (compatible, MSIE 11, Windows NT 6.3; Trident/7.0; rv:11.0) like Gecko

Mozilla/5.0 (compatible; MSIE 10.6; Windows NT 6.1; Trident/5.0; InfoPath.2; SLCC1; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; .NET CLR 2.0.50727) 3gpp-gba UNTRUSTED/1.0

对于第一种：

MSIE ([^,]+) //MSIE 11

对于第二种：

MSIE ([^;]+) //MSIE 10.6
识别浏览器

继续完善该代码：

var client = function(){

    var engine = {
        
        ie: 0,
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,
        
        ver: null //完整的版本
    };
    
    var browser = {
    
        ie: 0,
        firefox: 0,
        safari: 0,
        konq: 0,
        opera: 0,
        chrome: 0,
        
        ver: null
    
    };
    
    return {
        engine: engine
    };
}();

由于大多数浏览器与其呈现引擎密切相关，所以下面示例中检测浏览器的代码与检测呈现引擎的代码是混合在一起的。

var ua = navigator.userAgent;
if (window.opera){
    engine.ver = browser.ver = window.opera.version();
    engine.opera = browser.opera = parseFloat(engine.ver);
}else if (/AppleWebKit/(S+)/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);
    
    //确定是Chrome还是Safari
    if (/Chrome/(S+)/.test(ua)){
        browser.ver = RegExp["$1"];
        browser.chrome = parseInt(browser.ver);
    }else if(/Version/(S+)/.test(ua)){
        browser.ver = RegExp["$1"];
        browser.safari = parseInt(browser.ver);
    }else{
        
        //近似的确定版本号
        var safariVersion = 1;
        if (engine.webkit < 100){
            safariVersion = 1;
        }else if (engine.webkit < 312){
            safariVersion = 1.2;
        }else if (engine.webkit < 412){
            safariVersion = 1.3;
        }else {
            safariVersion = 2;
        }
        browser.safari = browser.ver = safariVersion;
    }
    
}else if (/KHTML/(S+)/.test(ua) || /Konqueror/([^;]+)/.test(ua)){
    engine.ver = browser.ver = RegExp["$1"];
    engine.khtml = browser.konq = parseFloat(engine.ver);
}else if (/rv:([^)]+)) Gecko/d{8}/.test(ua)){
    engine.ver = RegExp["$1"];
    engine.gecko = parseFloat(engine.ver);
    
    //确定不是firefox
    if(/Firefox/(S+)/.test(ua)){
        browser.ver = RegExp["$1"];
        browser.firefox = parseFloat(browser.ver);
    }
}else if (/MSIE ([^;]+)/.test(ua)){
    engine.ver = browser.ver = RegExp["$1"];
    engine.ie = browser.ie = parseFloat(engine.ver);
}
识别平台

略

识别Windows操作系统

略

识别移动设备

略

识别游戏系统

略

超融合服务器 idc机房托管 云主机的要点 深度学习的要点 检测客户端类型 javascript代码检测

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78259.html

相关文章

  • 《JavaScript高级程序设计》笔记：客户端检测（九）

    摘要：由于怪癖检测无法精确地检测特定的浏览器和版本。用户代理检测需要特殊的技巧，特别是要注意会隐瞒其用户代理字符串的情况。而在客户端，用户代理检测一般被当作一种万不得已的做法，其优先级排在能力检测和怪癖检测之后。 能力检测 在编写代码之前先检测特定浏览器的能力。例如,脚本在调用某个函数之前，可能要先检测该函数首付存在。这种检测方法将开发人员从考虑具体的浏览器类型和版本中解放出来，让他们把注意...

    aaron 评论0 收藏0

  • JavaScript 客户端检测（高程三）

    摘要：客户端检测方式能力检测怪癖检测用户代理检测能力检测最常用也是最为人们广泛接受的客户端检测形式是能力检测又称特性检测。在可能的情况下，尽量使用进行能力检测。 客户端检测方式 能力检测 怪癖检测 用户代理检测 能力检测 最常用也是最为人们广泛接受的客户端检测形式是能力检测（又称特性检测）。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。采用这种方式不必顾及特定的浏览器如何...

    msup 评论0 收藏0

  • 《JavaScript高级程序设计》（第3版）读书笔记 第9章 客户端检测

    摘要：用户代理检测用户代理检测是争议最大的客户端检测技术。第二个要检测是。由于实际的版本号可能会包含数字小数点和字母，所以捕获组中使用了表示非空格的特殊字符。版本号不在后面，而是在后面。除了知道设备，最好还能知道的版本号。 检测Web客户端的手段很多，各有利弊，但不到万不得已就不要使用客户端检测。只要能找到更通用的方法，就应该优先采用更通用的方法。一言蔽之，先设计最通用的方案，然后再使用特定...

    ispring 评论0 收藏0

  • JavaScript客户端检测

    摘要：前言检测客户端的手段很多，并且各有利弊，但不到万不得已，不要使用客户端检测，只要能找到更通用的方法，就优先使用更通用的方法。用户代理检测在每一次请求过程中，用户代理字符串是作为响应首部发送的，并且该字符串能被的访问。 前言：检测Web客户端的手段很多，并且各有利弊，但不到万不得已，不要使用客户端检测，只要能找到更通用的方法，就优先使用更通用的方法。 1 能力检测 能力检测的目标不是识...

    YacaToy 评论0 收藏0

  • JavaScript の 客户端检测

    摘要：博文模块增强模式进行客户端检测标签博文常用的检测方式为能力检测用户代理检测这里有用户代理检测检测插件非浏览器是一个包含浏览器插件的数组这个数组的每一项都包含插件的名字插件的描述插件的文件名插件所处理的类型数量检测插件在中无效方法用于把字符串 [博文]模块增强模式进行客户端检测 标签： 博文 常用的检测方式为: [ ] 1 . 能力检测 [ ] 2 . 用户代理检测 这里有 2 ...

    KnewOne 评论0 收藏0

发表评论

登陆后可评论

0条评论

instein

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
<