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 相关文章推荐
MooTools 1.2介绍
Sep 14 Javascript
javascript跨域刷新实现代码
Jan 01 Javascript
javascript中Object使用详解
Jan 26 Javascript
jQuery实现鼠标悬停显示提示信息窗口的方法
Apr 30 Javascript
jquery及js实现动态加载js文件的方法
Jan 21 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
jQuery实现表格与ckeckbox的全选与单选功能
Nov 24 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
vue-router beforeEach跳转路由验证用户登录状态
Dec 26 Javascript
js打开word文档预览操作示例【不是下载】
May 23 Javascript
微信小程序 调用微信授权窗口相关问题解决
Jul 25 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 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程序?
2006/12/08 PHP
PHP 正则表达式之正则处理函数小结(preg_match,preg_match_all,preg_replace,preg_split)
2012/10/05 PHP
PHP实现生成唯一编号(36进制的不重复编号)
2014/07/01 PHP
Ubuntu12下编译安装PHP5.3开发环境
2015/03/27 PHP
Zend Framework框架教程之Zend_Db_Table_Rowset用法实例分析
2016/03/21 PHP
浅谈PHP安全防护之Web攻击
2017/01/03 PHP
PHP递归实现文件夹的复制、删除、查看大小操作示例
2017/08/11 PHP
微博@符号的用户名提示效果。(想@到谁?)
2010/11/05 Javascript
JS实现图片翻书效果示例代码
2013/09/09 Javascript
解析URI与URL之间的区别与联系
2013/11/22 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
2015/08/12 Javascript
javascript中arguments,callee,caller详解
2016/03/16 Javascript
js编写一个简单的产品放大效果代码
2016/06/27 Javascript
AngularJS基础 ng-show 指令简单示例
2016/08/03 Javascript
js document.getElementsByClassName的使用介绍与自定义函数
2016/11/25 Javascript
Vue.js实战之利用vue-router实现跳转页面
2017/04/01 Javascript
详解使用fetch发送post请求时的参数处理
2017/04/05 Javascript
简单实现JavaScript弹幕效果
2020/08/27 Javascript
详解Vue组件实现tips的总结
2017/11/01 Javascript
vue2.0中set添加属性后视图不能更新的解决办法
2019/02/22 Javascript
a标签调用js的方法总结
2019/09/05 Javascript
layer实现登录弹框,登录成功后关闭弹框并调用父窗口的例子
2019/09/11 Javascript
Layui动态生成select下拉选择框不显示的解决方法
2019/09/24 Javascript
微信小程序实现点击图片放大预览
2019/10/21 Javascript
使用Promise封装小程序wx.request的实现方法
2019/11/13 Javascript
用VsCode编辑TypeScript的实现方法
2020/05/07 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
2020/11/02 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
Python在Console下显示文本进度条的方法
2016/02/14 Python
python机器学习理论与实战(六)支持向量机
2018/01/19 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
慈善捐赠倡议书
2014/08/30 职场文书
财务总监岗位职责
2015/02/03 职场文书
隐形的翅膀观后感
2015/06/10 职场文书