当前位置: 首页 > Web前端 > HTML

客户端检测之用户代理检测——navigator.userAgent-

时间:2023-04-02 19:00:22 HTML

前言前端的东西,先有事实再有标准。不管各大浏览器各自为政还是w3c来晚了,现有的事实标准都很难改变。虽说多方分分合合,相互竞争,总比一家独爱好。但是难不成我们这些平头小码农?颈椎病又加深了。之前看过《JavaScript高级程序设计》,今天总结一下它的用户代理检测的源码。话不多说,开始写吧!博文地址:ClientDetection之UserAgentDetection—navigator.userAgent1。客户端检测面对各种浏览器普遍存在的不一致问题,开发者不得不使用各种客户端检测手段来突破或规避各种限制。检测Web客户端的方法有很多种,每种方法各有优缺点。在服务器端,用户代理检测是一种常见且被广泛接受的做法。通过检测浏览器发送的用户代理字符串的内容来识别用户的浏览器。2.navigator.userAgentBOM,浏览器对象模型。BOM提供了很多访问浏览器功能的对象,这些功能与网络中的内容无关。w3c已将其主要方面添加到HTML5Deluxe包中。BOM包括window、location、navigator、screen、history对象,navigator对象中的userAgent属性为用户代理字符串。3、用户代理检测代码varua=navigator.userAgent;//用户代理字符串3.1渲染引擎检测主要检测五大渲染引擎(renderingengines):IE、Gecko、WebKit、KHTML和Opera。为了不在全局范围内增加冗余变量,采用模块增强方式封装检测脚本。检测脚本的基本代码结构如下:varclient=function(){varengine={//renderingengineie:0,gecko:0,webkit:0,khtml:0,opera:0,//具体版本号ver:null};//检测渲染引擎return{engine:engine};}();client全局变量,用于保存相关信息。匿名函数内部定义了一个局部变量引擎,每个渲染引擎对应一个属性,属性的值默认为0。如果检测到渲染引擎,则将该引擎的版本号作为浮点值写入相应的属性。渲染引擎的完整版本(它是一个字符串)被写入ver属性。//检测渲染引擎varua=navigator.userAgent;if(window.opera){engine.ver=window.opera.version();engine.opera=parseFloat(engine.ver);}elseif(/AppleWebKit\/(\S+)/.test(ua)){engine.ver=RegExp["$1"];engine.webkit=parseFloat(engine.ver);}elseif(/KHTML\/(\S+)/.test(ua)){engine.ver=RegExp["$1"];engine.khtml=parseFloat(engine.ver);}elseif(/rv:([^\)]+)\)Gecko\/\d{8}/.test(ua)){engine.ver=RegExp["$1"];engine.gecko=parseFloat(engine.ver);}elseif(/MSIE([^;]+)/.test(ua)){engine.ver=RegExp["$1"];engine.ie=parseFloat(engine.ver);}3.2识别浏览器varclient=function(){varengine={//渲染引擎ie:0,gecko:0,webkit:0,khtml:0,opera:0,//具体版本ver:null};varbrowser={//浏览器ie:0,firefox:0,safari:0,konq:0,opera:0,chrome:0,//具体版本ver:null};//检测渲染引擎和浏览器return{engine:engine,browser:browser};}();代码中添加了一个私有变量browser,用于保存每个主浏览器的属性,与引擎变量相同,除了当前使用的浏览器,其他属性的值将保持为0;如果是当前使用的浏览器,版本号以浮点值的形式保存在该属性中。同样,ver属性将在必要时以字符串形式包含浏览器的完整版本号。由于大多数浏览器与其渲染引擎紧密相关,因此下面示例中检测浏览器的代码与检测渲染引擎的代码混合在一起。//检测渲染引擎和浏览器varua=navigator.userAgent;if(window.opera){engine.ver=browser.ver=window.opera.version();engine.opera=browser.opera=parseFloat(engine.ver);}elseif(/AppleWebKit\/(\S+)/.test(ua)){engine.ver=RegExp["$1"];engine.webkit=parseFloat(engine.ver);//确保是Chrome或Safariif(/Chrome\/(\S+)/.test(ua)){browser.ver=RegExp["$1"];browser.chrome=parseFloat(浏览器.ver);}elseif(/Version\/(\S+)/.test(ua)){browser.ver=RegExp["$1"];browser.safari=parseFloat(浏览器.ver);}else{//大概的版本号varsafariVersion=1;if(engine.webkit<100){safariVersion=1;}elseif(engine.webkit<312){safariVersion=1.2;}elseif(engine.webkit<412){safariVersion=1.3;}else{safariVersion=2;}browser.safari=browser.ver=safariVersion;}}其他eif(/KHTML\/(\S+)/.test(ua)||/Konqueror\/([^;]+)/.test(ua)){engine.ver=browser.ver=RegExp["$1"];engine.khtml=browser.konq=parseFloat(engine.ver);}elseif(/rv:([^\)]+)\)Gecko\/\d{8}/.test(ua)){engine.ver=RegExp["$1"];engine.gecko=parseFloat(engine.ver);//判断是否为Firefoxif(/Firefox\/(\S+)/.test(ua)){browser.ver=RegExp["$1"];browser.firefox=parseFloat(浏览器.ver);}}elseif(/MSIE([^;]+)/.test(ua)){engine.ver=browser.ver=RegExp["$1"];engine.ie=browser.ie=parseFloat(engine.ver);}3.3识别系统平台很多时候,只知道渲染引擎就足以编写合适的代码,但在某些情况下,平台可能是一个必须的问题被重视。不同平台版本的浏览器(如Safari、Firefox、Opera),在不同的平台下可能会出现不同的问题。当前的三个主要平台是Windows、Mac和Unix(包括各种Linux版本)。添加一个新对象:varclient=function(){varsystem={win:false,mac:false,x11:false};//检测设备varp=navigator.platform;system.win=p.indexOf("赢")==0;system.mac=p.indexOf("Mac")==0;system.x11=(p.indexOf("X11")==0)||(p.indexOf("Linux"==0);return{engine:engine,browser:browser,system:system};}();3.3.1识别具体的Windows系统在Windows平台下,可以进一步获取具体操作系统来自用户代理字符串信息,下表列出了不同浏览器给出的不同字符串,代表不同的Windows操作系统:由于用户对Windows操作系统版本的表示方式不同,检测代码不是很直观agent字符串。OK现在从Windows2000开始,大部分代表操作系统的字符串还是一样的,只是版本号变了。为了检测不同的Windows操作系统,必须使用正则表达式。因为用户使用版本在Opera7之前已经没有多少了,所以我们可以忽略这部分浏览器。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";休息;case"5.1":system.win="XP";休息;case"6.0":system.win="Vista";休息;案例“6.1”:system.win=“7”;休息;默认值:system.win="NT";休息;}}elseif(RegExp["$1"]=="9x"){system.win="ME";}else{system.win=RegExp["$1"];}}}3.3.2识别移动设备varclient=function(){varsystem={win:false,mac:false,x11:false,//移动设备iphone:false,ipod:false,ipad:false,ios:false,android:false,nokiaN:false,winMobile:false};//检测移动设备system.iphone=ua.indexOf("iPhone")>-1;system.ipod=ua.indexOf("iPod")>-1;system.ipad=ua.indexOf("iPad")>-1;system.nokiaN=ua.indexOf("诺基亚")>-1;//windowsmobileif(system.win=="CE"){system.winMobile=system.win;}elseif(system.win=="Ph"){if(/WindowsPhoneOS(\d+.\d+)/.test(ua)){system.win="Phone";system.winMobile=parseFloat(RegExp["$1"]);}}//检测iOS版本if(system.mac&&ua.indexOf("Mobile")>-1){if(/CPU(?:iPhone)?OS(\d+_\d+)/.test(ua)){system.ios=parseFloat(RegExp.$1.replace("_","."));}else{系统.ios=2;//无法真正检测到,只能猜测}}//检测Android版本if(/Android(\d+\.\d+)/.test(ua)){system.android=parseFloat(RegExp.$1);}返回{engine:engine,browser:browser,system:system};}();3.3.3识别游戏系统除了移动设备,视频游戏系统中的网络浏览器也越来越受欢迎NintendoWii和Playstation3或内置网络浏览浏览器,或提供浏览器下载。Wii上的浏览??器实际上是Opera的自定义版本,专为WiiRemote设计。Playstation的浏览器是自行开发的,并非基于上述任何渲染引擎。这两个浏览器中的用户代理字符串如下所示:Opera/9.10(NintendoWii;U;;1621;en)Mozilla/5.0(PLAYSTATION3;2.00)第一个字符串来自运行在Wii上的Opera,它忠实地继承了Opera的原始用户代理字符串格式。第二个字符串来自Playstation3,虽然它出于兼容性将自己标识为Mozilla5.0,但它没有提供太多信息,而且设备名称全部大写。varclient=function(){varsystem={win:false,mac:false,x11:false,//移动设备iphone:false,ipod:false,ipad:false,ios:false,android:false,nokiaN:false,winMobile:false,//游戏系统wii:false,ps:false};//检测游戏系统system.wii=ua.indexOf("Wii")>-1;system.ps=/playstation/i.test(ua);return{engine:engine,browser:browser,system:system};}();3.4完整代码UserAgentDetection.js