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; }
}