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

欲休

发布于 2018-03-15 13:20:56

8970

发布于 2018-03-15 13:20:56

文章被收录于专栏：前端杂货铺前端杂货铺

平淡的描述

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

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

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

javascript

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

javascript

登录后参与评论

0 条评论

热度