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

最新推荐文章于 2024-09-30 14:28:41 发布
最新推荐文章于 2024-09-30 14:28:41 发布
阅读量97 收藏
点赞数
文章标签： javascript 操作系统 ViewUI
原文链接：https://segmentfault.com/a/1190000004095133
版权

用户代理检测

通过 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:

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

  2. 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:

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

  2. 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操作系统

略

识别移动设备

略

识别游戏系统

略

weixin_34342578
关注
VueJS ReactJS实现AI问答小助手(2)——流式TTS文字转实时语音播放
南七小僧的学海无涯
05-22 842
文档只给出了一些配置项的说明，以及java端的代码示例，但没有web端的。所以这篇笔记可以给web开发者参考。首先，AI答复的消息是通过SSE()返回的。SSE请求的实现流程后续有时间再填坑。代码实现中，使用了一个onReply回调来执行后续动作。这个方法会连续多次执行，直到消息结束。SSE是单向的，只能由服务端向客户端推送，而流式TTS这种双向通信需要通过socket来实现。socket的实现，原本是打算用封装了心跳、房间等概念的socket.io。
JavaScript基础笔记.md
06-23
3. **1996年**：微软模仿JavaScript推出了自己的客户端脚本语言——JScript。 4. **1997年**：ECMA（欧洲计算机制造商协会）制定了客户端脚本语言的标准——ECMAScript，该标准统一了所有客户端脚本语言的编码方式。...
识别呈现引擎
wenle006的专栏
06-13 801
    User-agent Detection Example            var client = function(){     //rendering engines    var engine = {                    ie: 0,        gecko: 0,        webkit: 0,        k
JavaScript 用户代理检测（浏览器类型检测，运行平台检测等） 规范代码
Delay_coder的博客
11-03 648
客户端检测 客户端检测很直观地分为： 能力检测，怪癖检测和用户代理检测 能力检测是检验所运行的平台是否支持指定的函数，代码或者功能。建议需要才检测的原则，可将所需要的功能进行统一检测到初始化中，这样可以实现能力检测的统一管理。 怪癖检测是检验所运行的平台或者引擎是否有指定的bug，该方法主要是为了避免浏览器的某些知名的BUG，但是一般开发者不会遇到。 用户代理检测是检验JavaScript的运行代码的呈现引擎，浏览器等等而实现的方法，主要用于实现多平台多功能。 用户代理检测规范代码 本规范代码参考自Ni
js 获取是否网络代理
记事本
07-01 2413
如何禁止代理IP访问网站，当时第一个想到的就是使用PHP呗（个人比较喜欢的语言之一） 但是他的站点是HTML的，哎呀！HTML的那怎么运行PHP呢，不过他的服务器有PHP环境哦。 好吧，既然是HTML的吧，那JS应该可以的吧，但是JS获取用户IP的接口没有一个是靠谱的；那就用PHP了，下面就不罗嗦了，直接代码走起来！ 利用AJAX功能来实现目的吧！直接代码上起来 isIp.JS window....
JavaScript 客户端检测——“能力检测”的注意要点
weixin_33898876的博客
12-01 52
客户端检测 不到万不得已，就不要使用客户端检测。只要能够找到更通用的方法，就应该优先采用更通用的方法。先设计最通用的方案，然后再使用特定于浏览器的技术增强该方案。 能力检测（性能检测） 基本模式语法 目标不是识别特定的浏览器，而是识别浏览器的能力。基本模式如下： if (object.propertyInQuestion){ //...
详解JavaScript中的客户端消息框架设计原理
12-09
所以，这篇文章是我在发现JavaScript中成功的运用客户端消息模式的一些关键要点时的一个掠影。 1.) 理解中介者与观察者的区别   大多数人在描述任何事件/消息机制的时候喜欢套用“发布者/订阅者”(pub/sub)——但...
安卓Android源码——利用JSON，通过客户端访问web服务器，实现一个登录功能.zip
10-11
客户端将用户输入的数据封装成JSON格式的字符串，然后发送到服务器；服务器验证数据后，也可能以JSON格式返回响应状态和可能的错误信息。 2. HTTP请求：Android客户端通常通过HTTP或HTTPS协议与Web服务器通信。可以...
《WEB前端框架开发技术》HTML5响应式旅游景区网站设计与实现——榆林子州HTML+CSS+JavaScript.md
08-10
通过该项目的学习与实践，不仅能够掌握网页设计的基本流程和技术要点，还能了解如何构建具有良好用户体验的响应式网站。这对于初学者来说是一个很好的起点，同时也为未来的前端开发打下了坚实的基础。
js判断客户端是否启用了代理_为何要对生产环境的 Node.js 使用反向代理？
weixin_39607240的博客
12-23 434
推荐阅读：玩转JAVA筑基之Netty、并发编程与设计模式，打好基础备战春招秋招面试总结：Java+并发+Spring+MySQL+分布式+Redis+算法+JVM等阿里技术官总结这20 多个高并发编程必备的知识点，你都会吗？都是“Redis惹的祸”，害我差点挂在美团三面，真是“虚惊一场”早在 2012 年，PHP 和 Ruby on Rails 仍是统治渲染 web 应用的服务器端技术。但是，一...
说说 JavaScript 对用户代理的检测技术（附完整源代码）
读万卷书，行万里路
04-18 2829
用户代理检测指的是，检测用户代理字符串来确定用户实际使用的浏览器。在服务端，用户代理检测是一种常见且广为让人接受的方式；但是，在客户端，用户代理检测是一种万不得已才使用的方法，它经常被放在能力检测和怪癖检测之后。可以通过 navigator.userAgent 得到用户代理字符串。用户代理经常跟电子欺骗联系在一起，因为浏览器会在自己的用户代理字符串中加入一些错误或者误导性的信息，来欺骗服务器。1 用
浏览器用户代理检测
两只鱼，鱼鱼鱼鱼鱼
01-11 516
用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。 在每一次 HTTP 请求过程中，用户代理字符串是作为响应首部发送的，而且该字符串可以通过 JavaScript 的navigator.userAgent 属性访问。用户代理代理检测，主要通过navigator.userAgent 来获取用户代理字符串的，通过这组字符串，我们来获取当前浏览器的版本号、浏览器名称、系统名称。 PS：在服务
js判断客户端是否启用了代理_nginScript 系列：使用 nginScript 将客户端重定向到新服务器...
weixin_39819327的博客
12-23 438
nginScript 的一个关键优势在于它提供了读取和设置 NGINX 配置变量的能力。变量可以用于自定义路由规则。也就是说，我们可以使用 JavaScript 来实现复杂的功能，这些功能可以直接对请求的处理产生影响。将客户端重定向到新的应用服务器在这篇文章里，我们将介绍如何使用 nginScript 来实现优雅的服务器间切换。我们不打算进行“一次性”的切换，而是定义了一个时间窗口，客户端在事件窗...
knowLedge-Vue I18n 是 Vue.js 的国际化插件
最新发布
2301_76671906的博客
09-30 951
Vue 2 中使用 Vue I18n 插件实现中英文切换
"JavaScript实验指导书：电子商务专业必备，详细操作步骤，适合初学者
该指导书是电子商务专业重要课程客户端脚本实训的理想教材，旨在帮助学生巩固和提高JavaScript客户端脚本的学习，以满足电子商务专业课程实践环节的教学需求。 为支持电子商务专业课程的实践环节教学，电子商务教研...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值