文章目录

  1. 1. User-Agent检测(用户代理检测)
    1. 1.1. 什么是User-Agent?
    2. 1.2. 怎么进行用户代理检测
  2. 2. 特性推断/浏览器推断
  3. 3. 抉择
    1. 3.1. 是否使用特征推断/浏览器推断
    2. 3.2. 是否使用用户代理检测
  4. 4. 简单封装对浏览器的嗅探
  5. 5. 参考文献

在前端开发中经常会遇到一系列兼容性问题,怎样精准地识别出各个浏览器的版本,这个就涉及到浏览器嗅探问题。

User-Agent检测(用户代理检测)

什么是User-Agent?

User-Agent是Http协议中的一部分,属于头域的组成部分,User Agent也简称UA。用较为普通的一点来说,是一种向访问网站提供你所使用的浏览器类型、操作系统及版本、CPU 类型、浏览器渲染引擎、浏览器语言、浏览器插件等信息的标识。UA字符串在每次浏览器 HTTP 请求时发送到服务器。

怎么进行用户代理检测

一个简单的案例

if (navigator.userAgent.indexOf("MSIE") > -1) {
    // 是 IE
} else {
    // 不是 IE
}

特性推断/浏览器推断

特性推断尝试使用多个特性但仅验证了其中之一。根据一个特性的存在推断另一个特性是否存在。起初前端工程师们就极力反对浏览器检测,他们认为类似user-agent嗅探的方法是很不好的,理由是它并不是一种面向未来的代码,无法适应新版的浏览器。更好的做法是使用特性检测。

if (navigator.userAgent.indexOf("MSIE 7") > -1){
//do something
}
改造成
if(document.all){
//do something
}

但是,所做的所有探测仅仅说明 document.all 是否存在,而并不能用于判断浏览器是否是 IE。因此,这是一个错误的隐式推断,可能会导致代码不能正常运行。通过特性检测而推断出是某个浏览器同样是很糟糕的做法,这叫做浏览器推断,是一种错误的实践。此外,还存在一个很重要的维护问题,因为特性检测依赖于哪些浏览器支持,当出现新版本浏览器的时候,需要繁琐的确认工作。因为你没办法阻止其他浏览器实现相同的功能,最终导致代码返回不可靠的结果。

抉择

是否使用特征推断/浏览器推断

纯粹的特性检测是一种很好的做法。但是,值得注意的是,不要试图推断特性间的关系,否则最终得到的结果也是不可靠的。所以,浏览器推断是糟糕的做法,应当不惜一切代价避免使用。

是否使用用户代理检测

对于是否需要使用用户代理检测,有很多不同的观点。有人害怕浏览器不总是提供它们原始的user-agent字符串。因为,可以使用现成的工具修改用户代理。对于我们开发者而言,这样会导致用户代理检测失效。其实,我们大可不必担心用户代理欺骗,因为如果一个用户有能力进行代理欺骗,他肯定有预期意识到不可预期的后果。此外,如果使用用户代理检测,比较好的方式针对旧的或特定版本的浏览器,而绝不应当针对最新版本或者未来的浏览器,因为随着新的浏览器出现,你需要不断地更新代码。

简单封装对浏览器的嗅探

/**
 * 获取浏览器类型
 * @author LiangGzone
 * @returns
 */
getBrowserVer : function() {
   var userAgent = navigator.userAgent.toLowerCase();
   var mozilla = /firefox/i.test(userAgent);
   var chrome = /chrome/i.test(userAgent);
   var opera = /opera/i.test(userAgent);
   var safari = /safari/i.test(userAgent);
   var msie = /msie/i.test(userAgent);

   if(mozilla){
      return "Firefox";
   }else if(chrome){
      return "Chrome";
   }else if(opera){
      return "Opera";
   }else if(safari){
      return "Safari";
   }else if(msie){
      return "IE";
   }else{
      return "unknown";
   }
}

参考文献

(书)「编写可维护的JavaScript」(Nicholas C. Zakas)

(完)

微信公众号

文章目录

  1. 1. User-Agent检测(用户代理检测)
    1. 1.1. 什么是User-Agent?
    2. 1.2. 怎么进行用户代理检测
  2. 2. 特性推断/浏览器推断
  3. 3. 抉择
    1. 3.1. 是否使用特征推断/浏览器推断
    2. 3.2. 是否使用用户代理检测
  4. 4. 简单封装对浏览器的嗅探
  5. 5. 参考文献