博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
javascript 客户端能力检测
阅读量:4039 次
发布时间:2019-05-24

本文共 3873 字,大约阅读时间需要 12 分钟。

浏览器的能力检测目标不是检测特定的浏览器,而是检测浏览器的能力。这样,只需要检测浏览器是否支持特定的能力,就可以给出特定的解决方案。这一部分检测是解决浏览器兼容问题的主要检测。
能力检测的基本模式如下:
if(object.propertyInQuestion){
    //使用object.propertyInQuestion
}
检测能力需要明白两个准则:
第一:先检测达成目的最常用的特性
第二:必须要测试实际用到的特性
寻求更加可靠地能力检测一直是前端开发人员所希望做的。
例如检测对象是否具有排序方法:
function isSortable(object){
  return typeof object.sort=="function";
}
在可能的情况下尽量使用typeof来进行能力检测。
在浏览器环境下测试任何对象的是否存在特定的一个特征存在时,可以使用下面的方法:
function isHostMethod(object,property){
    var t=typeof object[property];
    return t=="function"||(!!(t=="object"&&object[property]))||t=="unknown";
}
但是即便是这样,这些类似的检测函数也不是100%可靠的,具体的方法需要开发人员自行确定,以对风险作出规避。
如果要使用浏览器的相关特性,就需要一次性的检测全部的相关功能,而不是用到的时候再进行检测。
怪癖测试则是检测浏览器的特殊行为,通常是类似bug一样的存在。
用户代理检测
通过检测用户代理字符串来检测用户实际使用的浏览器,优先级排在能力检测和怪癖检测之后,不到万不得已不会使用的检测。
五大浏览器呈现引擎:IE,Gecko,WebKit,KHTML,Opera
用户代理检测的全部代码
var client=function(){
   var engine={
     //呈现引擎
     ie:0,
 gecko:0,
 webkit:0,
 khtml:0,
 opera:0,
 //版本号
 ver:null
   
   };
     var browser={
   //主要浏览器
   ie:0,
   firefox:0,
   safari:0,
   konq:0,
   opera:0,
   chrome:0
   
   //具体版本号
   ver:null
 };
  var system={
  //平台、设备和移动平台
    win:false,
mac:false,
xll:false,
iphone:false,
ipad:false,
ipod:false,
ios:false,
android:false,
nokiaN:false,
winMobile:false,
wii:false,
ps:false
  };
  
  var ua=navigator.userAgent;
  if(window.opera){
  engine.ver=browser.ver=window.opera.version();
  engine.opera=browser.opera=parseFloat(engine.ver);
  }else if(/AppleWebKit\/(\s+)/.test(ua)){
  engine.ver=RegExp["$1"];
  engine.webkit=parseFloat(browser.ver);
  //确定是chrome还是safari
  if(/Chrome\/(\s+)/.test(ua)){
  browser.ver=RegExp["$1"];
  browser.chrome=parseFloat(browser.ver);
  }else if(/Version\/(\s+)/.test(ua)){
  browser.ver=RegExp["$1"];
  browser.safari=parseFloat(browser.ver);
  }else{
  var safariVersion=1;
  if(engine.webkit<100){
  safariVersion=1;
  }else if(engine.webkit<312){
  safariVersion=1.2;
  
  }else if(engine.webkit<412){
  safariVersion=1.3;
  
  }else{
 safariVersion=2; 
  }
      browser.safari=browser.ver=safariVersion;  
  
 }
  
  }else if(/KHTML\/(\s+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
  engine.ver=browser.ver=RegExp["$1"];
  engine.khtml=browser.konq=parseFloat(engine.ver);
  }else if(/rv:([^\]+)\) Gecko\/\d{8}/.test(ua)){
  engine.ver=RegExp["$1"];
  engine.gecko=parseFloat(engine.ver);
     //确定是不是FireFox
 if(/FireFox\/(\s+)/.test(ua)){
 browser.ver=RegExp["$1"];
 browser.firefox=parseFloat(browser.ver);
 }
  }else if(/MSIE([^;]+)/.test(ua)){
  engine.ver=browser.ver=RegExp["$1"];
  engine.ie=browser.ie=parseFloat(engine.ver);
 
  }
  
 //检测浏览器
 browser.ie=engine.ie;
 browser.opera=engine.opera;
 
 //检测平台
 var p=navigator.platform;
 system.win=p.indexOf("Win")==0;
 system.mac=p.indexOf("Mac")==0;
 system.xll=(p=="xll"||(p.indexOf("Linux")==0));
 
 //检测windows操作系统
 if(system.win){
 if(/Win(?:dows)?([^do]{2})\s?(\d+\.\d+)?/.test(ua)){
 if(RegExp["$1"]=="NT"){
 switch(RegExp["$2"]){
 case "5.0":system.win="2000";break;
 case "5.1":system.win="XP";break;
 case "6.0":system.win="Vista";break;
 case "6.1":system.win="7";break;
 default:system.win="NT";break;
 }
 }else if(RegExp["$1"]){
 system.win="ME";
 }else{
  system.win=RegExp["$1"];
 
 }
 }
 }
 //移动设备
 system.iphone=ua.indexOf("iPhone")>-1;
 system.ipod=ua.indexOf("iPod")>-1;
 system.ipad=ua.indexOf("iPad")>-1;
 system.nokiaN=ua.indexOf("NokiaN")>-1;
 
 //windows mobile
 
 if(system.win=="CE"){
 system.winMobile=system.win;
 }else if(system.win=="Ph"){
 if(/Window Phone OS (\d+.\d+)/.test(ua)){
 system.win="Phone";
 system.winMobile=parseFloat(RegExp["$1"]);
 
 }
 
 }
//检测IOS版本
if(system.mac&&ua.indexOf("Mobile")>-1){
if(/CPU (?:iPhone)?OS (\d+_\d+)/.test(ua)){
system.ios=parseFloat(RegExp.$1.replace("_","."));
}else{
system.ios=2;
}
}
   //检测Android
   if(/Android (\d+\.\d+)/.test(ua)){
   system.android=parsefloat(RegExp["$1"]);
   }
   
   //游戏系统
   system.wii=ua.indexOf("Wii")>-1;
   system.ps=/playstation/i.texst(ua);
   //返回这些对象
   return {
   engine:engine,
   browser:browser,
   system:system
   };
};
用户代理检测适用于以下情形:
1.不能直接准确的使用能力检测或怪癖检测。例如浏览器为将来功能预留了存根(stub)函数,仅仅检测相应的函数得不到足够的信息
2.同一款浏览器在不同平台下具有不同的能力
3.为了跟踪分析等目的需要知道确切的浏览器
用户代理检测的优先级在这三种检测中是最低的,最高的是能力检测,其次是怪癖检测。

 

转载地址:http://dbvdi.baihongyu.com/

你可能感兴趣的文章
gdb 调试core dump
查看>>
gdb debug tips
查看>>
arm linux 生成火焰图
查看>>
linux和windows内存布局验证
查看>>
linux insmod error -1 required key invalid
查看>>
linux kconfig配置
查看>>
linux不同模块completion通信
查看>>
linux printf获得时间戳
查看>>
C语言位扩展
查看>>
linux dump_backtrace
查看>>
linux irqdebug
查看>>
git 常用命令
查看>>
linux位操作API
查看>>
uboot.lds文件分析
查看>>
uboot start.s文件分析
查看>>
没有路由器的情况下,开发板,虚拟机Ubuntu,win10主机,三者也可以ping通
查看>>
本地服务方式搭建etcd集群
查看>>
安装k8s Master高可用集群
查看>>
忽略图片透明区域的事件(Flex)
查看>>
忽略图片透明区域的事件(Flex)
查看>>