JS之DOM篇-能力檢測(cè)
2021-09-29 14:48:14

能力檢測(cè)又稱特性檢測(cè)，它與前文介紹的用戶代理檢測(cè)不同，能力檢測(cè)的目標(biāo)不是識(shí)別特定的瀏覽器，而是識(shí)別瀏覽器的能力。能用能力檢測(cè)得到解決的問(wèn)題，不要使用用戶代理檢測(cè)

引入

能力檢測(cè)的基本形式如下

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

下面針對(duì)不同瀏覽器的能力檢測(cè)進(jìn)行簡(jiǎn)單說(shuō)明

IE檢測(cè)

要檢測(cè)當(dāng)前IE瀏覽器是哪個(gè)版本，最簡(jiǎn)單的方式是使用document.documentMode屬性，該屬性只有IE瀏覽器支持，表示當(dāng)前的文檔模式

// 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屬性外，還可以通過(guò)檢測(cè)瀏覽器是否支持某個(gè)方法，進(jìn)而判斷IE瀏覽器版本

IE8-瀏覽器不支持getComputedStyle()方法

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

IE9-瀏覽器不支持HTML5新增的定時(shí)器requestAnimationFrame

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

IE10-瀏覽器不支持自定義屬性dataset

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

chrome檢測(cè)

chrome瀏覽器在window對(duì)象下有一個(gè)專有的chrome屬性，返回一個(gè)對(duì)象

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