用户代理字符串userAgent可实现的四个识别


Posted in Javascript onSeptember 20, 2015

定义

用户代理字符串:navigator.userAgent

HTTP规范明确规定,浏览器应该发送简短的用户代理字符串,指明浏览器的名称和版本号。但现实中却没有这么简单。

发展历史

【1】1993年美国NCSA国家超级计算机中心发布了世界上第一款web浏览器Mosaic,该浏览器的用户代理字符串为Mosaic/0.9

【2】Netscape公司进入浏览器开发领域,将自己产品的代号定名了Mozilla(Mosaic Killer)的简写,用户代理字符串格式为Mozilla/版本号 [语言] (平台;加密类型)

【3】IE发布的第一款赢得用户广泛认可的web浏览器IE3,当时Netscap已经占据了绝对市场份额,为了让服务器能够检测到IE,IE将用户代理字符串修改成兼容Netscape的形式:Mozilla/2.0(compatible;MSIE版本号;操作系统)

【4】各浏览器陆续出现,用户代理字符串的显示格式也越来越类似…… 

测试工具

 利用各桌面浏览器调试工具,主要是IE调试工具及chrome的emulation手机调试工具

 用户代理字符串userAgent可实现的四个识别

桌面端测试结果

【1】IE

[1.1]IE3

Mozilla/2.0 (compatible; MSIE3.02; windows 95)

[1.2]IE6

Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

[1.3]IE7

Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0)

[1.4]IE8

Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; Trident/4.0)

[1.5]IE9

Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0)

[1.6]IE10

Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; Trident/6.0)

[1.7]IE11

Mozilla/5.0 (MSIE 9.0; Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET

CLR 3.0.30729; .NET4.0C; .NET4.0E; InfoPath.3; GWX:QUALIFIED; rv:11.0) like Gecko

【2】chrome

Mozilla/5.0 (Windows NT 6.1; WOW64)G AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.93 Safari/537.36

【3】safari

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/534.57.2 (KHTML, like Gecko) Version/5.1.7 Safari/534.57.2

【4】firefox

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

【5】opera

Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/45.0.2454.85 Safari/537.36 OPR/32.0.1948.25

移动端测试结果

【1】ipad

Mozilla/5.0 (iPad; CPU OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53

【2】iphone

Mozilla/5.0 (iPhone; CPU iPhone OS 8_0 like Mac OS X) AppleWebKit/600.1.3 (KHTML, like Gecko) Version/8.0 Mobile/12A4345d Safari/600.1.4

【3】android

Mozilla/5.0 (Linux; Android 4.2.2; GT-I9505 Build/JDQ39) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/31.0.1650.59 Mobile Safari/537.36

识别浏览器内核

常见的内核有Trident、Gecko和Webkit

[注意]因为Trident和Webkit的用户代理字符串中可能会出现 like Gecko的字眼,所以最后再测Gecko

function whichEngine(){
 var ua = navigator.userAgent;
 //Trident内核
 if(/Trident/.test(ua)){
  return "Trident";
 }
 //Webkit内核
 if(/WebKit/.test(ua)){
  return "WebKit";
 }  
 //Gecko内核
 if(/Gecko/.test(ua)){
  return "Gecko";
 }
}
console.log(whichEngine());//IE11下显示"Trident"

识别浏览器版本

【1】IE

IE3-IE10都可以通过MSIE的版本号来判断,因为有的IE11并不出现MSIE字符,且safari中也有rv字段,所以IE11需要通过rv后的版本号和Trident来配合判断

function isIE(){
 var ua = navigator.userAgent;
 //检测Trident引擎,IE8+
 if(/Trident/.test(ua)){
  //IE11+
  if(/rv:(\d+)/.test(ua)){
   return RegExp["$1"];
  } 
  //IE8-IE10 
  if(/MSIE (\d+)/.test(ua)){
   return RegExp["$1"];
  }  
 }
 //检测IE标识,IE7-
 if(/MSIE (\d+)/.test(ua)){
  return RegExp["$1"];
 } 
}
console.log(isIE());//只有IE会返回版本号,其他浏览器都返回undefined

【2】chrome

function isChrome(){
 var ua = navigator.userAgent;
 //先排除opera,因为opera只是在chrome的userAgent后加入了自己的标识
 if(!/OPR/.test(ua)){
  if(/Chrome\/(\S+)/.test(ua)){
   return RegExp["$1"];
  } 
 } 
}
console.log(isChrome());//只有Chrome会返回版本号45.0.2454.93,其他浏览器都返回undefined

【3】safari

function isSafari(){
 var ua = navigator.userAgent;
 //先排除opera
 if(!/OPR/.test(ua)){
  //检测出chrome和safari浏览器
  if(/Safari/.test(ua)){
   //检测出safari
   if(/Version\/(\S+)/.test(ua)){
    return RegExp["$1"];
   }  
  }
 } 
}
console.log(isSafari());//只有safari会返回版本号5.1.7,其他浏览器都返回undefined

【4】firefox

function isFireFox(){
 if(/Firefox\/(\S+)/.test(navigator.userAgent)){
  return RegExp["$1"];
 } 
}
console.log(isFireFox());//只有firefox会返回版本号40.0,其他浏览器都返回undefined

【5】opera

function isOpera(){
 if(/OPR\/(\S+)/.test(navigator.userAgent)){
  return RegExp["$1"];
 } 
}
console.log(isOpera());//只有opera会返回版本号32.0.1948.25,其他浏览器都返回undefined

识别操作系统

使用navigator.platform检测操作系统更加简单,因为其可能包括的值为“Win32”、“Win64”、“MacPPC”、“MacIntel”、“X11”和"Linux i686"等,且在不同浏览器中是一致的。

而通过navigator.userAgent可以来得到window系统的详细信息。

windows版本                        ->             内核版本
Windows XP                        ->             5.1
Windows Vista                     ->             6.0
Windows 7                         ->             6.1
Windows 8                         ->             6.2
Windows 8.1                       ->             6.3
Windows 10技术预览版               ->             6.4
Windows 10(Build 9880+)           ->             10

function whichSyStem(){
 var ua = navigator.userAgent;
 var pf = navigator.platform;
 if(/Mac/.test(pf)){
  return "Mac";
 }
 if(/X11/.test(pf) || /Linux/.test(pf)){
  return "Linux";
 }
 if(/Win/.test(pf)){
  if(/Windows NT (\d+\.\d+)/.test(ua)){
   switch(RegExp["$1"]){
    case "5.0":
     return "Windows 2000";
    case "5.1":
     return "Windows XP";
    case "6.0":
     return "Windows Vista";
    case "6.1":
     return "Windows 7";
    case "6.2":
     return "Windows 8";
    case "6.3":
     return "Windows 8.1";
    case "6.4":
    case "10":
     return "Windows 10";     
   }
  }
 }
}
console.log(whichSyStem())//Windows 7

识别移动端设备

function whichMobile(){
 var ua = navigator.userAgent;
 if(/iPhone OS (\d+_\d+)/.test(ua)){
  return 'iPhone Mac' + RegExp.$1.replace("_",".");
 }
 if(/iPad.+OS (\d+_\d+)/.test(ua)){
  return 'iPad Mac' + RegExp.$1.replace("_",".")
 }
 if(/Android (\d+\.\d+)/.test(ua)){
  return 'Android' + RegExp["$1"];
 }
}
console.log(whichMobile())//Android 5.1
Javascript 相关文章推荐
js不能跳转到上一页面的问题解决方法
Mar 01 Javascript
使用JS画图之点、线、面
Jan 12 Javascript
JavaScript使用Prototype实现面向对象的方法
Apr 14 Javascript
jQuery实现向下滑出的平滑下拉菜单效果
Aug 21 Javascript
jQuery实现简洁的导航菜单效果
Nov 23 Javascript
JS获取当前页面名称的简单实例
Aug 19 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
JavaScript解析任意形式的json树型结构展示
Jul 23 Javascript
vue-cli构建项目使用 less的方法
Oct 04 Javascript
vue使用vue-i18n实现国际化的实现代码
Apr 08 Javascript
vue实现网络图片瀑布流 + 下拉刷新 + 上拉加载更多(步骤详解)
Jan 14 Javascript
如何使用JavaScript实现无缝滚动自动播放轮播图效果
Aug 20 Javascript
jquery+正则实现统一的表单验证
Sep 20 #Javascript
基于JavaScript实现生成名片、链接等二维码
Sep 20 #Javascript
jQuery实现单击弹出Div层窗口效果(可关闭可拖动)
Sep 19 #Javascript
JS+CSS实现简单滑动门(滑动菜单)效果
Sep 19 #Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
Sep 19 #Javascript
jQuery实现点击按钮弹出可关闭层的浮动层插件
Sep 19 #Javascript
JS基于myFocus库实现各种功能的tab选项卡切换效果
Sep 19 #Javascript
You might like
php批量删除数据库下指定前缀的表以prefix_为例
2014/08/24 PHP
php中Snoopy类用法实例
2015/06/19 PHP
使用TextRange获取输入框中光标的位
2006/10/14 Javascript
Document 对象的常用方法
2009/07/31 Javascript
JavaScript单元测试ABC
2012/04/12 Javascript
JavaScript控制两个列表框listbox左右交换数据的方法
2015/03/18 Javascript
PHP结合jQuery实现的评论顶、踩功能
2015/07/22 Javascript
javascript弹性运动效果简单实现方法
2016/01/08 Javascript
javascript每日必学之继承
2016/02/23 Javascript
简单谈谈React中的路由系统
2017/07/25 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
Vue中CSS动画原理的实现
2019/02/13 Javascript
关于layui表单中按钮自动提交的解决方法
2019/09/09 Javascript
python进阶教程之循环对象
2014/08/30 Python
在Python的Django框架中获取单个对象数据的简单方法
2015/07/17 Python
简单理解Python中的装饰器
2015/07/31 Python
利用python将json数据转换为csv格式的方法
2018/03/22 Python
python调用摄像头显示图像的实例
2018/08/03 Python
Python3+Requests+Excel完整接口自动化测试框架的实现
2019/10/11 Python
python元组的概念知识点
2019/11/19 Python
python 微信好友特征数据分析及可视化
2020/01/07 Python
Python实现进度条和时间预估的示例代码
2020/06/02 Python
Python字符串格式化常用手段及注意事项
2020/06/17 Python
CSS3按钮鼠标悬浮实现光圈效果源码
2016/09/11 HTML / CSS
美国女性卫生用品公司:Thinx
2017/06/30 全球购物
澳大利亚个性化儿童礼品网站:Bright Star Kids
2019/06/14 全球购物
大学生旷课检讨书
2014/01/22 职场文书
电子商务专业学生职业生涯规划
2014/03/07 职场文书
实习单位评语
2014/04/26 职场文书
教师党员公开承诺事项
2014/05/28 职场文书
乡镇干部个人对照检查材料(群众路线)
2014/09/26 职场文书
企业整改报告范文
2014/11/08 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
MySql子查询IN的执行和优化的实现
2021/08/02 MySQL
一篇文章了解正则表达式的替换技巧
2022/02/24 Javascript
win10壁纸在哪个文件夹 win10桌面背景图片文件位置分享
2022/08/05 数码科技