JavaScript浏览器检测——dream参考之四

随着Web标准的推广与发展，各个厂家的浏览器也都开始并且遵循标准，JavaScript无疑也成为网站前端设计师所要掌握的技能之一。但是目前状态下不同的浏览器与标准还是有一定的差距，毕竟理想和现实是无法达到一致的。这也是在开发基于Web的应用程序时需要考虑的问题，为了兼容不同的浏览器，我们需要编写运行于不同浏览器中的脚本，这样才能保证用户达到良好的体验。

目前，JavaScript一般采用两种浏览器检测方式：对象/特征检测和user-agent字符串检测。每种方式都有一定的优缺点，所以要根据不同的情况采用不同的方式。

对象/特征检测方法

这是当前比较流行的检测方法，使用该方法编写的脚步有较好的移植性，因为我们编写的脚本不是为特定的浏览器所编写的私有脚本，而是根据浏览器对某个给定对象支持程度来编写，这就保证了浏览器升级或user-agent字符串有重大调整时脚本仍可执行，只要浏览器支持DOM的方法或属性，那么脚本就可以有很好的向前兼容性。例如，假设要使用DOM方法document.getElementById()来检测浏览器是否支持该方法，可是使用下面的脚本。

if (document.getElementById) { // 该方法不可有"()"，
  // 如果支持该方法，可以在此处编写代码
} else {
  // 如果不支持，提示错误，或采用其他的方法处理
}

user-agent字符串检测方法

user-agent字符串检测法是最久远的浏览器检测方式。现在用得最广的基本上是那些需要收集客户端用户信息和网站流量统计的程序。JavaScript提供了navigator对象来获得或检测客户端浏览器的信息，在这片文章中我们关注的是navigator.userAgent属性，user-agent字符串提供了关于客户端浏览器的大量信息，包括浏览器的名称和版本。而对于现在越来越多的浏览器品牌，检测浏览器确实不是一个使人轻松地工作。因为我的电脑上安装的是当前最新版本的浏览器，所以给出的结果对于古老的浏览器并不适用，为了确保正确性，参考了一些书籍，其中包括《JavaScript高级程序设计》。下面给出了一些常见浏览器的user-agent字符串(基于Windows XP平台)。

Internet Explorer 6.0    Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; CIBA; NET CLR 2.0.50727)
Internet Explorer 8.0    Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; CIBA; .NET CLR 2.0.50727)
Firefox 1.5              Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.5) Gecko/20031007
Firefox 3.5.5            Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN; rv:1.9.1.5) Gecko/20091102 Firefox/3.5.5
Opera                    Opera/9.64 (Windows NT 5.1; U; Edition IBIS; zh-cn) Presto/2.1.1
Netscape 9.0.06          Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080219 Firefox/2.0.0.12 Navigator/9.0.0.6
Chrome                   Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/532.0 (KHTML, like Gecko) Chrome/3.0.195.33 Safari/532.0
Safari                   Mozilla/5.0 (Windows; U; Windows NT 5.1; zh-CN) AppleWebKit/531.9 (KHTML, like Gecko) Version/4.0.3 Safari/531.9.1

可以看出，微软的浏览器开发代号都是Mozilla/4.0，而除Opera以外的都是Mozilla/5.0。所以可以编写针对于Oprea的脚本可以使用如下的脚本。

if (navigator.userAgent.indexOf('Opera') > -1) {
  alert('Opera');
} else {
  alert('Not Opera');
}

而对于IE浏览器检测起来就不是这么简单了，不仅要检测浏览器的类型，而且要检测IE的版本号。

if (navigator.userAgent.indexOf('MSIE') >= -1) {
  if (navigator.userAgent.indexOf('MSIE 6.') > -1) {
    // IE6版本的处理代码
  } else if (navigator.userAgent.indexOf('MSIE 8.') > -1) {
    // IE8版本的处理代码
  }
}

鉴于本人处于JavaScript处于初级，所以只能写出这样的脚本。

基于这种思路，检测浏览器最主要的是对那些特定浏览器的私有字符串进行检测，这样应该会有比较好的效果。就拿Firefox与Netscape为例，它们有Gecko和Firefox字符串，但是Netscape有自己私有的Navigator字符串，所以一步步地检测就可以编写针对特定浏览器的脚步。

最后还是建议使用对象检测方法，毕竟该方法是经得起未来的浏览器考验的。