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 相关文章推荐
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
利用jQuery实现可输入搜索文字的下拉框
Oct 23 Javascript
JS delegate与live浅析
Dec 21 Javascript
函数式 JavaScript(一)简介
Jul 07 Javascript
jquery+php实现搜索框自动提示
Nov 28 Javascript
JavaScript实现点击单选按钮改变输入框中文本域内容的方法
Aug 12 Javascript
jQuery根据name属性进行查找的用法分析
Jun 23 Javascript
bootstrap+spring boot实现面包屑导航功能(前端代码)
Oct 09 Javascript
详解Vue template 如何支持多个根结点
Feb 10 Javascript
js实现星星打分效果
Jul 05 Javascript
vue 清空input标签 中file的值操作
Jul 21 Javascript
Vue 数据绑定的原理分析
Nov 16 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实现域名whois查询的代码(数据源万网、新网)
2010/02/22 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
php中serialize序列化与json性能测试的示例分析
2013/04/27 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
Laravel监听数据库访问,打印SQL的例子
2019/10/24 PHP
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
关于js获取radio和select的属性并控制的代码
2011/05/12 Javascript
js实现非常简单的焦点图切换特效实例
2015/05/07 Javascript
老生常谈JavaScript中的this关键字
2016/10/01 Javascript
AngularJS模板加载用法详解
2016/11/04 Javascript
微信小程序之ES6与事项助手的功能实现
2016/11/30 Javascript
jQuery动态追加页面数据以及事件委托详解
2017/05/06 jQuery
Textarea输入字数限制实例(兼容iOS&amp;安卓)
2017/07/06 Javascript
jQuery实现定时隐藏对话框的方法分析
2018/02/12 jQuery
Bootstrap Table 双击、单击行获取该行及全表内容
2018/08/31 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
使用vue编写h5公众号跳转小程序的实现代码
2020/11/27 Vue.js
[04:16]DOTA2英雄梦之声_第09期_斧王
2014/06/21 DOTA
python使用urllib2模块获取gravatar头像实例
2013/12/18 Python
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
Python标准库之collections包的使用教程
2017/04/27 Python
python看某个模块的版本方法
2018/10/16 Python
浅谈Pycharm中的Python Console与Terminal
2019/01/17 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Django实现发送邮件功能
2019/07/18 Python
python字典的遍历3种方法详解
2019/08/10 Python
Python进程池Pool应用实例分析
2019/11/27 Python
TensorFlow固化模型的实现操作
2020/05/26 Python
Python无损压缩图片的示例代码
2020/08/06 Python
HTML5中drawImage用法分析
2014/12/01 HTML / CSS
加拿大女包品牌:Matt & Nat
2017/05/12 全球购物
extern是什么意思
2016/03/10 面试题
总务岗位职责
2013/11/19 职场文书
个人四风问题整改措施
2014/10/24 职场文书
Java 多线程并发FutureTask
2022/06/28 Java/Android