JS之DOM篇-能力检测
2021-09-29 14:48:14

能力检测又称特性检测，它与前文介绍的用户代理检测不同，能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。能用能力检测得到解决的问题，不要使用用户代理检测

引入

能力检测的基本形式如下

if(Object.propertyInQuestion){
  // 使用Object.propertyInQuestion
}

下面针对不同浏览器的能力检测进行简单说明

IE检测

要检测当前IE浏览器是哪个版本，最简单的方式是使用document.documentMode属性，该属性只有IE浏览器支持，表示当前的文档模式

// IE11返回11，IE10返回10，IE9返回9，IE8返回8，IE7返回7，IE6返回6
console.log(document.documentMode);

function isIE8(){
  return document.documentMode == 8;
}

function lteIE8(){
  return document.documentMode <= 8;
}

除了使用document.documentMode属性外，还可以通过检测浏览器是否支持某个方法，进而判断IE浏览器版本

IE8-浏览器不支持getComputedStyle()方法

function lteIE8(){
  var temp = typeof window.getComputedStyle;
  if(temp == 'undefined'){
    return true;
  }
}

IE9-浏览器不支持HTML5新增的定时器requestAnimationFrame

function lteIE9(){
  try{
    requestAnimationFrame;
  }catch(error){
    return true;
  }    
}

IE10-浏览器不支持自定义属性dataset

function lteIE10(){
  var temp = document.createElement('div').dataset;
  if(!temp){
    return true;
  }
}

chrome检测

chrome浏览器在window对象下有一个专有的chrome属性，返回一个对象

function isChrome(){
  if(window.chrome){ return true; }
}