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

平淡的描述

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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏小詹同学

如何用 Python 打飞机 ?

前言:python 除了生孩子 ,啥都会 。包括打飞机 !今天小詹的一位读者就来教你如何用 python 打飞机 !

45050
来自专栏数据科学学习手札

(数据科学学习手札05)Python与R数据读入存出方式的总结与比较

在数据分析的过程中,外部数据的导入和数据的导出是非常关键的部分,而Python和R在这方面大同小异,且针对不同的包或模块,对应着不同的函数来完成这部分功能: P...

30470
来自专栏性能与架构

将 Redis 作为图数据库

1. 简介 Redis 在 4.0 中正式支持了Module模块系统,使其可以进行丰富的扩展 图数据库的应用越来越广泛,RedisGraph 就是一个 Redi...

47560
来自专栏Rainbond开源「容器云平台」

你问我爱你有多深,源码代表我的心

21740
来自专栏非典型技术宅

Quartz2D进行渲染1. 渲染模式2. even-odd rule:奇偶填充规则3. nonzero winding number rule:非零绕数规则4. 其他会用到的渲染模式5. 混合模式

14430
来自专栏牛客网

新鲜出炉的百度-春招-前端面经

1. 自我介绍 2. 项目经验,我说项目名说错了,然后又说了一遍,面试官不知道什么心态的鬼魅一下 3. Html5不同于以前版本的特点 4. Html5新增ap...

388110
来自专栏葬爱家族

Android高级动画(3)

上一篇文章我们讲了Android中的矢量动画,虽然文中展示的Demo并不多,但是相信大家还是体会到了矢量动画的强大。这里再做一个温故总结:

18910
来自专栏数据小魔方

动态图表系列1|数据有效性(index+match函数)

今天开始跟大家分享动态图表的技巧1——数据有效性(index+match函数)! 动态图表之——数据有效性(index+match) 首先利用数据验证制作下拉菜...

46770
来自专栏程序员宝库

爬虫攻防之前端策略简析

文章里介绍了几个大的网站,在反爬虫过程中,采取的各式各样的策略,无不体现出前端工程师的奇葩脑洞。

18720
来自专栏全沾开发(huā)

项目结构——JavaScript版本的2048实现[0]

项目结构——JavaScript版本的2048实现[0] 最近在看一本书《HTML5 Canvas开发详解》 看到了一定程度,打算找...

39460

扫码关注云+社区

领取腾讯云代金券