不要使用浏览器嗅探,尽量使用特性检测和特性模拟

时间:2022-05-04
本文章向大家介绍不要使用浏览器嗅探,尽量使用特性检测和特性模拟,主要内容包括平淡的描述、示范1、示范2、言论、基本概念、基础应用、原理机制和需要注意的事项等,并结合实例形式分析了其使用技巧,希望通过本文能帮助到大家理解应用这部分内容。

平淡的描述

  在js中,能使用特征监测就尽量不要使用浏览器嗅探。嗅探浏览器目的是判断可否使用这个对象或者API,但是抛开浏览器

的各个版本的userAgent不说,还有些浏览器打补丁的情况,造成判断异常复杂,兜了个大的圈子,而特征检测则是直接

了当,不存在维护困难的问题。

  其次,当不确定某个版本的浏览器是否有特殊的bug时(如IE8下js访问css的float属性时,是styleFloat,

而在w3c浏览器下是CssFloat;IE8下getElementByTagNames返回NodeList包括注释节点),仅仅使用特征检测却是不够的。

这是就需要特性模拟。特性模拟最经典的例子就是jQuery的support模块,我们可以参考该模块来充分认识各个浏览器下的独特

的bug。

示范1  

  利用特征监测来推测IE的的版本号非常好用,也可利用IE的一些特有对象来识别IE所有系列。 

'VBArray' in window // true
'ActiveXObject' in window //true

if(isIE){
  if(document.documentMode == 11){
    isIE11 = true;  
  }else if('WebSocket' in window){
    isIE10 = true;    
  }else if('HTMLElement' in window){
    isIE9 = true;
  }else if('localStorage' in window){
    isIE8 = true;
  } else if('minHeight' in div.currentStyle){
    isIE7 = true;
  } else{
    isIE6 = true;
    document.execCommad('backgroundimagecache',false,false); //IE6并不会对背景图片进行缓存,故进行修补
  }
}    

对于ff:

  经最新版本测试

'netscape' in window // true

示范2

  利用特性模拟来判断浏览器的getElementByTagNames返回的NodeList对象是否包含注释节点: 

(function(){
    var hasCommentNode = false,d;
    d = document.createElement("div");
    d.appendChild(document.createComment("test"));
    if(d.getElementByTagNames("*").length != 0)
        hasCommentNode = true;
    window.hasCommentNode = hasCommentNode ;
    d.outerHTML = "";
})()

  模拟的结果保存在全局变量上,以供后面的代码使用。

  更为详细的特征模拟可以参考jQuery的support模块。其主要模拟了

    1. NodeList对象在旧版IE(IE678)下使用数组方法slice会出错;
    2. CssStyleDeclaration的float的属性名问题;
    3. IE下的滤镜问题(针对透明度而言);   
    4. 旧版IE下setAttribute("className")问题;

言论

  可见,没必要再对userAgent耿耿于怀,字符串可以随意伪造,但是浏览器的相关特性却是不会改变,所以我们

还是宁愿花几毫秒来测试一番,而不用提心吊胆的根据字符串随意猜测相关特性。