當(dāng)前位置:首頁 > IT技術(shù) > Web編程 > 正文

JS之DOM篇-能力檢測
2021-09-29 14:48:14

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

引入

能力檢測的基本形式如下

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

下面針對不同瀏覽器的能力檢測進行簡單說明

IE檢測

要檢測當(dāng)前IE瀏覽器是哪個版本,最簡單的方式是使用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屬性外,還可以通過檢測瀏覽器是否支持某個方法,進而判斷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; }
}

本文摘自 :https://www.cnblogs.com/

開通會員,享受整站包年服務(wù)立即開通 >