JavaScript 用户代理检测（浏览器类型检测，运行平台检测等） 规范代码

最新推荐文章于 2022-11-26 11:40:21 发布
最新推荐文章于 2022-11-26 11:40:21 发布
阅读量639 收藏 1
点赞数 1
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Delay_coder/article/details/109454292
版权

客户端检测

客户端检测很直观地分为： 能力检测，怪癖检测和用户代理检测

  • 能力检测是检验所运行的平台是否支持指定的函数，代码或者功能。建议需要才检测的原则，可将所需要的功能进行统一检测到初始化中，这样可以实现能力检测的统一管理。
  • 怪癖检测是检验所运行的平台或者引擎是否有指定的bug，该方法主要是为了避免浏览器的某些知名的BUG，但是一般开发者不会遇到。
  • 用户代理检测是检验JavaScript的运行代码的呈现引擎，浏览器等等而实现的方法，主要用于实现多平台多功能。

用户代理检测规范代码

本规范代码参考自Nicholas C.Zakas所著的Professional JavaScript for Web Developers，可实现识别 呈现引擎种类，浏览器种类， 运行平台种类， 移动设备种类 和 游戏系统种类 五种类别检测。

废话不说，放源码。下面我将在代码中加入高效的注释来解释代码的运行逻辑，以及在代码最后进行更为详细的分步介绍


var client = function(){
    //rendering engines 呈现引擎的局部变量，在此加入经典的五类引擎
    var engine = {            
        ie: 0,				
        gecko: 0,
        webkit: 0,
        khtml: 0,
        opera: 0,
        //more engine
        ver: null  
    };
    
    //browsers    浏览器类别的局部变量，加入经典的六类浏览器
    var browser = {
        ie: 0,
        firefox: 0,
        safari: 0,
        konq: 0,
        opera: 0,
        chrome: 0,
        //specific version
        ver: null
    };
    //platform/device/OS   运行平台的局部变量，加入经典的三类电脑平台，七类移动端平台以及两类游戏平台
    var system = {
        win: false,
        mac: false,
        x11: false,
        //mobile devices
        iphone: false,
        ipod: false,
        ipad: false,
        ios: false,
        android: false,
        nokiaN: false,
        winMobile: false,
        //game systems
        wii: false,
        ps: false 
    };    

    //detect rendering engines/browsers 该部分用于识别引擎和浏览器
    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);
        
        //figure out if it's Chrome or Safari
        if (/Chrome\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.chrome = parseFloat(browser.ver);
        } else if (/Version\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.safari = parseFloat(browser.ver);
        } else {
            //approximate version
            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);
        
        //determine if it's 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);
    }
    
    //detect browsers
    browser.ie = engine.ie;
    browser.opera = engine.opera;
    

    //detect platform						识别运行平台
    var p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

    //detect windows operating systems
    if (system.win){
        if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
            if (RegExp["$1"] == "NT"){
                switch(RegExp["$2"]){
                    case "5.0":
                        system.win = "2000";
                        break;
                    case "5.1":
                        system.win = "XP";
                        break;
                    case "6.0":
                        system.win = "Vista";
                        break;
                    case "6.1":
                        system.win = "7";
                        break;
                    default:
                        system.win = "NT";
                        break;                
                }                            
            } else if (RegExp["$1"] == "9x"){
                system.win = "ME";
            } else {
                system.win = RegExp["$1"];
            }
        }
    }
    
    //mobile devices
    system.iphone = ua.indexOf("iPhone") > -1;
    system.ipod = ua.indexOf("iPod") > -1;
    system.ipad = ua.indexOf("iPad") > -1;
    system.nokiaN = ua.indexOf("NokiaN") > -1;
    
    //windows mobile
    if (system.win == "CE"){
        system.winMobile = system.win;
    } else if (system.win == "Ph"){
        if(/Windows Phone OS (\d+.\d+)/.test(ua)){;
            system.win = "Phone";
            system.winMobile = parseFloat(RegExp["$1"]);
        }
    }
    
    
    //determine iOS version
    if (system.mac && ua.indexOf("Mobile") > -1){
        if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
            system.ios = parseFloat(RegExp.$1.replace("_", "."));
        } else {
            system.ios = 2;  //can't really detect - so guess
        }
    }
    
    //determine Android version
    if (/Android (\d+\.\d+)/.test(ua)){
        system.android = parseFloat(RegExp.$1);
    }
    
    //gaming systems
    system.wii = ua.indexOf("Wii") > -1;
    system.ps = /playstation/i.test(ua);
    
    //return it
    return {
        engine:     engine,
        browser:    browser,
        system:     system        
    };

}();

在代码运行最后，通过一个匿名函数返回结果给 client 变量。
下面是我在windows10 使用 chrome运行的结果。

类型版本
engine.webkit: 537.36engine.ver: “537.36”
browser.chrome: 85browser.ver: "85.0.4183.83"
system.win: “NT”

代码输出和实现的解释

识别呈现引擎（ie,gecko,webkit,khtml,opera）

首先用户代理字符串对于不同的浏览器和不同的平台来说变化非常多，下面来列举一些经典的用户代理字符串的例子。

引擎/浏览器用户代理字符串
WebKit / ChromeMozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.83 Safari/537.36
Gecko / FirfoxMozilla/5.0 (Windows NT 10.0; Win64; x64; rv:80.0) Gecko/20100101 Firefox/80.0
WebKit / SafariMozilla/5.0 (Macintosh; U; PPC Mac OS X; en) AppleWebKit/124 (Khtml, Kike Gecko) Safari/125.1
OperaMozilla/4.0 (compatible; MSIE 6.0); Windows NT 5.1; en) Opera 9.50

Opera

Opera经常将自己标识为其它引擎，因此我们先检测它，并且不使用用户代理字符串，要使用windows.opera函数。

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

Webkit

根据使用该引擎的浏览器的代理字符串特点，主要去识别 AppleWebKit 字符串，正则表达式组主要识别AppleWebKit和后面的版本号。ua是用户代理字符串，代码如下：

if (/AppleWebKit\/(\S+)/.test(ua)){
        engine.ver = RegExp["$1"];
        engine.webkit = parseFloat(engine.ver);
        }

KHTML

同理，主要识别 KHTML 字符串。ua是用户代理字符串。

if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq = parseFloat(engine.ver);}

Gecko

包含Gecko的版本号位于字符串“rv:”和一个闭括号之间，为了提取这个版本号，需要朝招所有不是闭括号的字符，而且还要查找字符串“Gecko/”后跟的八个数字。正则表达式为：“/rv:([^)]+)) Gecko/\d{8}/”。ua是用户代理字符串。具体代码为：

if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){    
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver)};

识别浏览器

由于Chrome和Safari使用同样的WebKit引擎，因此区分这两个浏览器很重要。在提取Chrome的版本号时，需要查找字符串“Chrome/”并取得该字符串后面的数值。而提取Safari的版本号时，则需要查找字符串“Version/”并取得其后的数值。如果Safari为3以下的版本，则需要一些备用代码。具体代码为：

 if (/Chrome\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.chrome = parseFloat(browser.ver);
        } else if (/Version\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.safari = parseFloat(browser.ver);
        } else {
            //approximate version
            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;        
        }

而对于Firefox浏览器，我们首先要找到“Firefox/”，然后提取该字符串后面的数值。代码很简单：

if (/Firefox\/(\S+)/.test(ua)){
            browser.ver = RegExp["$1"];
            browser.firefox = parseFloat(browser.ver);
        }

运行平台识别

通过navigator.platform来进行检测。具体代码为：

var p = navigator.platform;
    system.win = p.indexOf("Win") == 0;
    system.mac = p.indexOf("Mac") == 0;
    system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);

而平台识别后，只有windows会返回该系统的版本信息，但是由于不同引擎在不同操作系统中显示不同的字符串，因此需要通过如下的代码来通配所有的系统信息。如下所示。
在这里插入图片描述

if (system.win){
        if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
            if (RegExp["$1"] == "NT"){
                switch(RegExp["$2"]){
                    case "5.0":
                        system.win = "2000";
                        break;
                    case "5.1":
                        system.win = "XP";
                        break;
                    case "6.0":
                        system.win = "Vista";
                        break;
                    case "6.1":
                        system.win = "7";
                        break;
                    default:
                        system.win = "NT";
                        break;                
                }                            
            } else if (RegExp["$1"] == "9x"){
                system.win = "ME";
            } else {
                system.win = RegExp["$1"];
            }
        }
    }

识别移动设备

移动设备识别也是通过用户代理字符串检测来实现，实现方式较为简单。

  • iPhone, iPod 和 iPad: 通过indexOf检测用户代理字符串是否含有该指定字符串。其版本号内容较为多变。比如IOS3之前，字符串只包含“CPU like Mac OS”, iphone 改成 “CPU iphone OS 3_0 like Mac OS X”, iPad中改为“CPU OS 3_2 like Mac OS X”。因此版本号必须使用正则表达式去搜索匹配不同的规则。
` if (system.mac && ua.indexOf("Mobile") > -1){
        if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)){
            system.ios = parseFloat(RegExp.$1.replace("_", "."));
        } else {
            system.ios = 2;  //can't really detect - so guess
        }
    }`
  • Android操作系统识别。搜索字符串“Android”并取得紧随其后的版本号。
    if (/Android (\d+\.\d+)/.test(ua)){
        system.android = parseFloat(RegExp.$1);
    }
  • 诺基亚N系列手机：检测字符串中的“NokianN”，并取得紧随其后的版本号。
  • windows mobile：新老版本的windows mobile的system.win的返回值分别为 Ph和CE，因此需要正则表达式的存在。如果system.in的值是“CE”，就说明是老版本的windows Mobile，因此system.winMobile会被设置为相同的值。如果sytem.win的值是“Ph”，那么这个设备就可能是window phone7或更新版本。因此使用正则表达式来测试格式和版本号即可。

这个代码可以随着浏览器的种类增多慢慢丰富起来，欢迎大家提出宝贵的意见。

Volavion
关注
专栏目录
[网络安全提高篇] 一一三.Powershell恶意代码检测 (1)论文总结及抽象语法树（AST）提取
杨秀璋的专栏
03-11 1万+
这是作者网络安全自学教程系列，主要是关于安全工具和实践操作的在线笔记，特分享出来与博友们学习，希望您喜欢，一起进步。这篇文章将详细讲解PowerShell、Powershell恶意代码检测总结及抽象语法树（AST）提取。希望这篇文章对您有帮助，也推荐大家去阅读论文，且看且珍惜。
Android应用安全检测项目
苛学加记事
07-08 6941
Android应用安全检测项目 使用静态检测引擎对APK文件进行反编译，扫描反编译后的代码文件即可发现应用的安全漏洞。 一般有以下内容，比较有参考价值，部分是平时编码时有可能忽略的问题，在此整理供大家参考。 1. 基础信息 1.1 权限过度声明风险检测 检测应用中是否存在权限滥用情况。 权限是一种安全机制，主要用于限制应用程序内部某些具有限制性特性的功能使用以及应用程序之间的组件访问。Android通过在AndroidManifest.xml中增加权限来控制限制性功能的使用和组件访问。权限滥用是指应用权限开
JavaScript:用户代理检测源代码
yivisir的博客
07-18 262
原生JavaScript用户代理检测 代码直接po上，方便有需要者使用 var client = function(){ var engine = { ie : 0, gecko : 0, webkit : 0, khtml : 0, opera : 0, ver : null }; // 平台检测 /* 按顺序检测：opera,webkit,khtml,gec
javascript 的 代理检测（源自js高级程序设计）
低调的冲击波
01-18 291
var client = function(){ //呈现引擎 var engine = { ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, ...
userAgent，JS用户代理检测——判断浏览器内核、浏览器、浏览器平台、windows操作系统版本、移动设备、游戏系统
xyjikl
12-08 1729
1、识别浏览器呈现引擎 为了不在全局作用域中添加多余变量，这里使用单例模式（什么是单例模式？）来封装检测脚本。检测脚本的基本代码如下所示： 1 var client = function() { 2 var engine = { 3 ie: 0, 4 gecko: 0, 5 webkit: 0, 6 kh
js检测是否为PC平台/PC设备标识版
仿站、源码搭建/迁移技术博客
08-18 271
js检测是否为PC平台/PC设备标识版 <script> //平台、设备和操作系统 var system ={ win : false, mac : false, xll : false }; //检测平台 var p = navigator.platform; system.win = p.indexOf("Win
js客户端检测-用户代理字符串检测
zhangyuexin24的博客
09-12 459
主要用于检测浏览器信息，操作系统等。直接上代码，代码来源：JavaScript高级程序设计 &lt;script&gt; var client = function () { //呈现引擎 var engine = { ie: 0, gecko: 0, ...
说说 JavaScript 对用户代理的检测技术（附完整源代码）
读万卷书，行万里路
04-18 2816
用户代理检测指的是，检测用户代理字符串来确定用户实际使用的浏览器。在服务端，用户代理检测是一种常见且广为让人接受的方式；但是，在客户端，用户代理检测是一种万不得已才使用的方法，它经常被放在能力检测和怪癖检测之后。可以通过 navigator.userAgent 得到用户代理字符串。用户代理经常跟电子欺骗联系在一起，因为浏览器会在自己的用户代理字符串中加入一些错误或者误导性的信息，来欺骗服务器。1 用
判断浏览器的javascript版本的代码
12-09
在给定的代码中，主要涉及到的是通过检测浏览器对特定JavaScript方法的支持来判断其JavaScript引擎的版本。 首先，让我们分析一下这段代码的逻辑： 1. `var JS_ver = [];` 创建一个空数组用于存储检测到的...
isBot: 一个简单的JS库，用于检测机器人
最新发布
10-13
2. **用户代理检测**：IsBot可能通过分析用户的User Agent字符串来识别机器人，User Agent是浏览器向服务器发送的一种标识，表明了访问者所使用的浏览器类型和版本。 3. **事件监听**：JavaScript可以监听用户的...
IG-NoFollow-Extension:Chrome和Edge的网络扩展功能可检查未关注Instagram用户
05-25
Instagram不关注 Instagram No-Follow Back是一个网络浏览器扩展程序，它显示不关注Instagram帐户的帐户列表 安装说明 谷歌浏览器/ Microsoft Edge 以下载此。 解压缩该文件，您应该有一个名为IG-NoFollow-Extension-master的文件夹。 在Chrome / Edge中，转到扩展程序页面（ chrome://extensions或edge://extensions ）。 启用开发人员模式。 将IG-NoFollow-Extension-master文件夹IG-NoFollow-Extension-master页面上的任何位置以导入它（此后请勿删除该文件夹）。 具有自动更新支持的安装（推荐） 从的下载IG-NoFollow-Extension.crx文件。 在Chrome / Edge中，转到扩展程序页面（
js识别不同浏览器基于userAgent做判断
12-10
检测浏览器，注意浏览器判断顺序，主要是基于userAgent做判断。 //检测浏览器 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 }; var ua = navigator.userAgent; //浏览器检测有顺序 if(window.opera){//opera伪装
使用js检测浏览器的实现代码
12-11
在写跨浏览器的js程序中，检测浏览器是一个很重要的工作。我们不时要为不同的浏览器写分支代码。如下是一种： 代码如下://添加事件工具函数function addEvent(el,type,handle){    if(el.addEventListener){//for standard browses        el.addEventListener(type,handle,false);    }else if(el.attachEvent){//for IE        el.attachEvent(“on”+event,handle);    }else{//other     
规范化：Utilizando将浏览器规范化为不同的浏览器配置
02-26
- 使用Feature Detection（特性检测）而不是User-Agent sniffing（用户代理嗅探）来确定浏览器的功能支持情况，例如使用Modernizr库。 - 确保JavaScript代码符合ESLint等代码风格检查工具的规则，保证代码一致性。...
js判断平台访问，手机访问
两个人的幸福online
10-25 417
直接用js判断 if(/AppleWebKit.*Mobile/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent) || /BlackBerry/i.test(navigator.userAgent) || /IEMobile/i.test(navigator.userAgent) || (/MIDP|Symbia...
JS---浏览器检测
weixin_34221112的博客
11-30 117
由于每个浏览器都具有自己独到的扩展，所以在开发阶段来判断浏览器是一个非常重要的步骤。虽然浏览器开发商在公共接口方面投入了很多精力，努力的去支持最常用的公共功能；但在现实中，浏览器之间的差异，以及不同浏览器的“怪癖”却是非常多的，因此客户端检测除了是一种补救措施，更是一种行之有效的开发策略。一．navigator对象navigator对象最早由NetscapeNavigator...
JS判断设备类型
weixin_51609995的博客
10-19 366
使用 navigator.userAgent 做设备判断
Js逆向教程-13浏览器和JS的关系/伪造浏览器环境 )
编辑编辑器
11-26 3047
最后的最后由本人水平所限，难免有错误以及不足之处， 屏幕前的靓仔靓女们 如有发现，恳请指出！你轻轻地点了个赞，那将在我的心里世界增添一颗明亮而耀眼的星！
js正则识别浏览器
zzbkong的博客
08-13 210
以Chrome为例 先定义规则 var reg=/Chrome/; 使用navigator.userAgent 获取当前浏览器给我们返回的一个字符串 返回的浏览器中会包含浏览器名字 这里接收一下 var str=navigator.userAgent; 紧接着 用正则方法 test 来判断 字符串str中是否包含正则规则reg 包含会返回 true 做匹配 if(reg.test(str)){...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Volavion

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值