zoukankan      html  css  js  c++  java
  • 不要使用浏览器嗅探,尽量使用特性检测和特性模拟

    平淡的描述

      在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耿耿于怀,字符串可以随意伪造,但是浏览器的相关特性却是不会改变,所以我们

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

  • 相关阅读:
    杜教筛
    单纯形法
    回文树
    模板综合
    不明觉厉的数据结构题2
    gedit脚本
    01分数规划入门
    LCT裸题泛做
    洛谷P4586 [FJOI2015]最小覆盖双圆问题(最小圆覆盖)
    洛谷P1742 最小圆覆盖(计算几何)
  • 原文地址:https://www.cnblogs.com/accordion/p/4119968.html
Copyright © 2011-2022 走看看