BOM之navigator对象和用户代理检测


Posted in Javascript onFebruary 10, 2017

前面的话

navigator对象现在已经成为识别客户端浏览器的事实标准,navigator对象是所有支持javascript的浏览器所共有的。本文将详细介绍navigator对象和用户代理检测

属性

与其他BOM对象的情况一样,每个浏览器中的navigator对象也都有一套自己的属性。下表列出了存在于所有浏览器中的属性和方法,以及支持它们的浏览器版本

属性                                              说明

appCodeName             浏览器名称[所有浏览器都返回Mozilla]

userAgent               浏览器的用户代理字符串

appVersion              浏览器版本

appMinorVersion         次版本信息[IE返回0,chrome和firefox不支持]

platform                浏览器所在的系统平台[所有浏览器都返回Win32]

plugins                 浏览器中安装的插件信息的数组

mimeTypes               在浏览器中注册的MIME类型数组

language                浏览器主语言[IE10-不支持,其他浏览器返回zh-CN]

systemLanguage          操作系统语言[IE返回zh-CN,chrome和firefox不支持]

userLanguage            操作系统默认语言[IE返回zh-CN,chrome和firefox不支持]

product                 产品名称[IE10-不支持,其他浏览器返回Gecko]

productSub              产品次要信息[IE不支持,chrome返回20030107,firefox返回20100101]

vendor                  浏览器品牌[chrome返回Google Inc.,IE和firefox不支持]

onLine                  是否连接因特网[IE根据实际情况返回true或false,chrome和firefox始终返回true]

cookieEnabled           表示cookie是否启用[所有浏览器都返回true]

javaEnabled             是否启用java[IE8-浏览器返回{},其他浏览器返回function javaEnabled()]

buildID                 浏览器编译版本[firefox返回20170125094131,chrome和IE不支持]

cpuClass                计算机使用的CPU类型[IE返回x86,chrome和firefox不支持]

oscpu                   操作系统或使用的CPU[firefox返回Windows NT 10.0; WOW64,chrome和IE不支持]

检测插件

检测浏览器插件是一种最常见的检测例程

对于非IE浏览器,可以使用plugins数组来达到这个目的该数组中的每一项都包含下列属性

name:插件的名字 

description:插件的描述

filename:插件的文件名

length:插件所处理的MIME类型数量

通过循环迭代每个插件并将插件的name与给定的名字进行比较

function hasPlugin(name){
 name = name.toLowerCase();
 for(var i = 0; i < navigator.plugins.length; i++){
  if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
   return true;
  }
 }
}
//检测flash
console.log(hasPlugin("Flash"));//true

对于IE浏览器,检测插件的办法是使用专有的ActiveXObject类型,并尝试创建一个特定插件的实例。IE是使用COM对象来实现插件的,而COM对象使用唯一标识符来标识。因此,想检查特定的插件就必须知道其COM标识符。例如,Flash的标识符是ShockwaveFlash.ShockwaveFlash

function hasIEPlugin(name){
 try{
  new ActiveXObject(name);
  return true;
 }catch(ex){
  return false;
 }
}
//检测Flash
console.log(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"))//true

【兼容写法】

//检测非IE中的插件
function hasPlugin(name){
 name = name.toLowerCase();
 for(var i = 0; i < navigator.plugins.length; i++){
  if(navigator.plugins[i].name.toLowerCase().indexOf(name) > -1){
   return true;
  }
 }
}
//检测IE中的插件
function hasIEPlugin(name){
 try{
  new ActiveXObject(name);
  return true;
 }catch(ex){
  return false;
 }
}
function hasFlash(){
 var result = hasPlugin("Flash");
 if(!result){
  result = hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
 }
 return result;
}
console.log(hasFlash());//true

用户代理检测

navigator对象中最重要的作用就是使用useragent实现用户代理检测。用户代理检测是一种万不得已的做法,优先级排在前面介绍过的能力检测之后

发展历史

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

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

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

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

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

检测结果

【IE3】

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

【IE6】

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

【IE7】

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

【IE8】

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

【IE9】

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

【IE10】

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

【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

【chrome】

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

【safari】

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

【firefox】

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

【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

【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

【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

【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.0

   ->    10.0
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.0":
     return "Windows 10";     
   }
  }
 }
}
console.log(whichSyStem())//Windows 10

识别移动端

function whichMobile(){
 var ua = navigator.userAgent;
 if(/iPhone OS (\d+_\d+)/.test(ua)){
  return 'iPhone' + RegExp.$1.replace("_",".");
 }
 if(/iPad.+OS (\d+_\d+)/.test(ua)){
  return 'iPad' + RegExp.$1.replace("_",".")
 }
 if(/Android (\d+\.\d+)/.test(ua)){
  return 'Android' + RegExp["$1"];
 }
}
console.log(whichMobile())//Android 5.1

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
百度地图api应用标注地理位置信息(js版)
Feb 01 Javascript
解决JS中乘法的浮点错误的方法
Jan 03 Javascript
调试代码导致IE出错的避免方法
Apr 04 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
Ext JS动态加载JavaScript创建窗体的方法
Jun 23 Javascript
利用jquery如何从json中读取数据追加到html中
Dec 01 jQuery
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
使用bootstrap实现下拉框搜索功能的实例讲解
Aug 10 Javascript
通过实践编写优雅的JavaScript代码
May 30 Javascript
Jquery ajax书写方法代码实例解析
Jun 12 jQuery
如何构建一个Vue插件并生成npm包
Oct 26 Javascript
基于JQuery及AJAX实现名人名言随机生成器
Feb 10 #Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 #Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 #Javascript
javascript自执行函数
Feb 10 #Javascript
完美解决jQuery的hover事件在IE中不停闪动的问题
Feb 10 #Javascript
jquery hover 不停闪动问题的解决方法(亦为stop()的使用)
Feb 10 #Javascript
JS验证不重复验证码
Feb 10 #Javascript
You might like
php 模拟 asp.net webFrom 按钮提交事件的思路及代码
2013/12/02 PHP
php使用gettimeofday函数返回当前时间并存放在关联数组里
2015/03/19 PHP
Zend Framework教程之Zend_Form组件实现表单提交并显示错误提示的方法
2016/03/21 PHP
php实现网页端验证码功能
2017/07/11 PHP
PHP基于openssl实现非对称加密代码实例
2020/06/19 PHP
简单学习JavaScript中的for语句循环结构
2015/11/10 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
2016/01/27 Javascript
iOS和Android用同一个二维码实现跳转下载链接的方法
2016/09/28 Javascript
getElementById().innerHTML与getElementById().value的区别
2016/10/27 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
angularjs通过过滤器返回超链接的方法
2018/10/26 Javascript
独立部署小程序基于nodejs的服务器过程详解
2019/06/24 NodeJs
JavaScript内置对象之Array的使用小结
2020/05/12 Javascript
[07:43]《辉夜杯》公开赛晋级外卡赛战队—TRG训练生活探秘
2015/12/11 DOTA
[01:12:27]EG vs Secret 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python 实现堆排序算法代码
2012/06/05 Python
Python中声明只包含一个元素的元组数据方法
2014/08/25 Python
python基础_文件操作实现全文或单行替换的方法
2017/09/04 Python
Python实现PS滤镜中马赛克效果示例
2018/01/20 Python
在VS Code上搭建Python开发环境的方法
2018/04/06 Python
pandas创建新Dataframe并添加多行的实例
2018/04/08 Python
python字符串查找函数的用法详解
2019/07/08 Python
python将时分秒转换成秒的实例
2019/12/07 Python
python列表返回重复数据的下标
2020/02/10 Python
Pycharm远程连接服务器并实现代码同步上传更新功能
2020/02/25 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
环保专项行动方案
2014/05/12 职场文书
大学生求职信例文
2014/06/29 职场文书
关于有小孩的离婚协议书
2014/10/26 职场文书
2015年车间主任工作总结
2015/05/21 职场文书
会议开幕致辞怎么写
2016/03/03 职场文书
zabbix监控mysql的实例方法
2021/06/02 MySQL