BOM之navigator对象和用户代理检测
前面的话
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返回GoogleInc.，IE和firefox不支持]
onLine 是否连接因特网[IE根据实际情况返回true或false，chrome和firefox始终返回true]
cookieEnabled 表示cookie是否启用[所有浏览器都返回true]
javaEnabled 是否启用java[IE8-浏览器返回{}，其他浏览器返回functionjavaEnabled()]
buildID 浏览器编译版本[firefox返回20170125094131，chrome和IE不支持]
cpuClass 计算机使用的CPU类型[IE返回x86，chrome和firefox不支持]
oscpu 操作系统或使用的CPU[firefox返回WindowsNT10.0;WOW64，chrome和IE不支持]
检测插件
检测浏览器插件是一种最常见的检测例程
对于非IE浏览器，可以使用plugins数组来达到这个目的该数组中的每一项都包含下列属性
name:插件的名字
description:插件的描述
filename:插件的文件名
length:插件所处理的MIME类型数量
通过循环迭代每个插件并将插件的name与给定的名字进行比较
functionhasPlugin(name){
name=name.toLowerCase();
for(vari=0;i<navigator.plugins.length;i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
returntrue;
}
}
}
//检测flash
console.log(hasPlugin("Flash"));//true
对于IE浏览器，检测插件的办法是使用专有的ActiveXObject类型，并尝试创建一个特定插件的实例。IE是使用COM对象来实现插件的，而COM对象使用唯一标识符来标识。因此，想检查特定的插件就必须知道其COM标识符。例如，Flash的标识符是ShockwaveFlash.ShockwaveFlash
functionhasIEPlugin(name){
try{
newActiveXObject(name);
returntrue;
}catch(ex){
returnfalse;
}
}
//检测Flash
console.log(hasIEPlugin("ShockwaveFlash.ShockwaveFlash"))//true
【兼容写法】
//检测非IE中的插件
functionhasPlugin(name){
name=name.toLowerCase();
for(vari=0;i<navigator.plugins.length;i++){
if(navigator.plugins[i].name.toLowerCase().indexOf(name)>-1){
returntrue;
}
}
}
//检测IE中的插件
functionhasIEPlugin(name){
try{
newActiveXObject(name);
returntrue;
}catch(ex){
returnfalse;
}
}
functionhasFlash(){
varresult=hasPlugin("Flash");
if(!result){
result=hasIEPlugin("ShockwaveFlash.ShockwaveFlash");
}
returnresult;
}
console.log(hasFlash());//true
用户代理检测
navigator对象中最重要的作用就是使用useragent实现用户代理检测。用户代理检测是一种万不得已的做法，优先级排在前面介绍过的能力检测之后
发展历史
1、1993年美国NCSA国家超级计算机中心发布了世界上第一款web浏览器Mosaic，该浏览器的用户代理字符串为Mosaic/0.9
2、Netscape公司进入浏览器开发领域，将自己产品的代号定名了Mozilla(MosaicKiller)的简写，用户代理字符串格式为Mozilla/版本号[语言](平台；加密类型)
3、IE赢得用户广泛认可的web浏览器IE3发布时，Netscape已经占据了绝对市场份额，为了让服务器能够检测到IE，IE将用户代理字符串修改成兼容Netscape的形式：Mozilla/2.0(compatible;MSIE版本号；操作系统)
4、各浏览器陆续出现，用户代理字符串的显示格式也越来越类似……
HTTP规范明确规定，浏览器应该发送简短的用户代理字符串，指明浏览器的名称和版本号。但现实中却没有这么简单，各浏览器的检测结果如下所示
检测结果
【IE3】
Mozilla/2.0(compatible;MSIE3.02;windows95)
【IE6】
Mozilla/4.0(compatible;MSIE6.0;WindowsNT5.1)
【IE7】
Mozilla/4.0(compatible;MSIE7.0;WindowsNT6.0)
【IE8】
Mozilla/4.0(compatible;MSIE8.0;WindowsNT6.1;Trident/4.0)
【IE9】
Mozilla/5.0(compatible;MSIE9.0;WindowsNT6.1;Trident/5.0)
【IE10】
Mozilla/5.0(compatible;MSIE10.0;WindowsNT6.2;Trident/6.0)
【IE11】
Mozilla/5.0(MSIE9.0;WindowsNT6.1;WOW64;Trident/7.0;SLCC2;.NETCLR2.0.50727;.NETCLR3.5.30729;.NETCLR3.0.30729;.NET4.0C;.NET4.0E;InfoPath.3;GWX:QUALIFIED;rv:11.0)likeGecko
【chrome】
Mozilla/5.0(WindowsNT6.1;WOW64)GAppleWebKit/537.36(KHTML,likeGecko)Chrome/45.0.2454.93Safari/537.36
【safari】
Mozilla/5.0(WindowsNT6.1;WOW64)AppleWebKit/534.57.2(KHTML,likeGecko)Version/5.1.7Safari/534.57.2
【firefox】
Mozilla/5.0(WindowsNT6.1;WOW64;rv:40.0)Gecko/20100101Firefox/40.0
【opera】
Mozilla/5.0(WindowsNT6.1;WOW64)AppleWebKit/537.36(KHTML,likeGecko)Chrome/45.0.2454.85Safari/537.36OPR/32.0.1948.25
【ipad】
Mozilla/5.0(iPad;CPUOS7_0likeMacOSX)AppleWebKit/537.51.1(KHTML,likeGecko)Version/7.0Mobile/11A465Safari/9537.53
【iphone】
Mozilla/5.0(iPhone;CPUiPhoneOS8_0likeMacOSX)AppleWebKit/600.1.3(KHTML,likeGecko)Version/8.0Mobile/12A4345dSafari/600.1.4
【android】
Mozilla/5.0(Linux;Android4.2.2;GT-I9505Build/JDQ39)AppleWebKit/537.36(KHTML,likeGecko)Chrome/31.0.1650.59MobileSafari/537.36
识别内核
常见的内核有Trident、Gecko和Webkit
[注意]因为Trident和Webkit的用户代理字符串中可能会出现likeGecko的字眼，所以最后再测Gecko
functionwhichEngine(){
varua=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来配合判断
functionisIE(){
varua=navigator.userAgent;
//检测Trident引擎，IE8+
if(/Trident/.test(ua)){
//IE11+
if(/rv:(\d+)/.test(ua)){
returnRegExp["$1"];
}
//IE8-IE10
if(/MSIE(\d+)/.test(ua)){
returnRegExp["$1"];
}
}
//检测IE标识，IE7-
if(/MSIE(\d+)/.test(ua)){
returnRegExp["$1"];
}
}
console.log(isIE());//只有IE会返回版本号，其他浏览器都返回undefined
【2】chrome
functionisChrome(){
varua=navigator.userAgent;
//先排除opera,因为opera只是在chrome的userAgent后加入了自己的标识
if(!/OPR/.test(ua)){
if(/Chrome\/(\S+)/.test(ua)){
returnRegExp["$1"];
}
}
}
console.log(isChrome());//只有Chrome会返回版本号45.0.2454.93，其他浏览器都返回undefined
【3】safari
functionisSafari(){
varua=navigator.userAgent;
//先排除opera
if(!/OPR/.test(ua)){
//检测出chrome和safari浏览器
if(/Safari/.test(ua)){
//检测出safari
if(/Version\/(\S+)/.test(ua)){
returnRegExp["$1"];
}
}
}
}
console.log(isSafari());//只有safari会返回版本号5.1.7，其他浏览器都返回undefined
【4】firefox
functionisFireFox(){
if(/Firefox\/(\S+)/.test(navigator.userAgent)){
returnRegExp["$1"];
}
}
console.log(isFireFox());//只有firefox会返回版本号40.0，其他浏览器都返回undefined
【5】opera
functionisOpera(){
if(/OPR\/(\S+)/.test(navigator.userAgent)){
returnRegExp["$1"];
}
}
console.log(isOpera());//只有opera会返回版本号32.0.1948.25，其他浏览器都返回undefined
识别操作系统
使用navigator.platform检测操作系统更加简单，因为其可能包括的值为“Win32”、“Win64”、“MacPPC”、“MacIntel”、“X11”和"Linuxi686"等，且在不同浏览器中是一致的
而通过navigator.userAgent可以来得到window系统的详细信息
windows版本->内核版本 WindowsXP->5.1 WindowsVista->6.0 Windows7->6.1 Windows8->6.2 Windows8.1->6.3 Windows10技术预览版->6.4 Windows10.0->10.0
functionwhichSyStem(){
varua=navigator.userAgent;
varpf=navigator.platform;
if(/Mac/.test(pf)){
return"Mac";
}
if(/X11/.test(pf)||/Linux/.test(pf)){
return"Linux";
}
if(/Win/.test(pf)){
if(/WindowsNT(\d+\.\d+)/.test(ua)){
switch(RegExp["$1"]){
case"5.0":
return"Windows2000";
case"5.1":
return"WindowsXP";
case"6.0":
return"WindowsVista";
case"6.1":
return"Windows7";
case"6.2":
return"Windows8";
case"6.3":
return"Windows8.1";
case"6.4":
case"10.0":
return"Windows10";
}
}
}
}
console.log(whichSyStem())//Windows10
识别移动端
functionwhichMobile(){
varua=navigator.userAgent;
if(/iPhoneOS(\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())//Android5.1
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！