当前位置： 移动技术网 > IT编程>开发语言>JavaScript > BOM之navigator对象和用户代理检测

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

2019年03月26日  | 移动技术网IT编程  | 我要评论

前面的话

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持移动技术网！

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网