2

前言

在《微插件推荐系列:userAgent》中,介绍了如何通过navigator.userAgent来判断浏览器的标识名称和版本号,但是这种方法有比较大的弊端,不过这个弊端危害又不是很大,怎么理解呢?首先navigator.userAgent是个奇怪的产物:在第一次浏览器大战初期,Netscape占绝对统计地位,大部分人们不愿意兼容其他浏览器,并通过检测其UA让他们的网站只允许Netscape访问,这就逼使其他浏览器(包括IE)修改自己的UA伪装成Netscape来通过那些自以为是的脚本,于是出现每个人都声称自己是别人的局面,即使最新的IE9的UA也是,这说明了navigator.userAgent是个可以随意修改的东西,既然是可以改变的东西,那么它存在的意义就小了,可实际上我们的项目中,大部分还是通过navigator.userAgent来判断浏览器的。这是为什么?因为谁蛋疼的特意修改这个呀。

能力检测和怪癖检测

在《高级JavaScript设计中》,作者力推我们使用能力检查和怪癖检测来做浏览器判断,通过这种方式,基本百分之百能确认这个浏览器的类型了,确定类型后,在通过navigator.userAgent拉到版本号,这样基本上是一种很安全的检测方法了。(ps:关于能力检测和怪癖检测请查考《高级JavaScript设计中》第九章)。

比如:

var isIE6=window.ActiveXObject && !window.XMLHttpRequest;

这段代码就是判断浏览器是否是IE6,首先通过判断window.ActiveXObject来判断是IE浏览器,因为只有IE浏览器支持这个属性。然后通过!window.XMLHttpRequest再来确认具体的IE版本,因为只有IE6是通过ActiveX创建XMLHttpRequest的。

上面的例子,就是通过能力检测和怪癖检测综合检测确定浏览器的类型和版本号。

对于这种方式检测来说,可以说是一场华丽的黑魔法之旅。下面我们再聊下IE6的判断。

var ie6=!-[1,]&&!window.XMLHttpRequest;

这号称是最短的IE6判断,看看代码是不是觉得很惊奇,很魔法呀。

在看一段更秒更觉的方法,这段方法都可以收录到你的gist上了。

var _IE = (function(){
    var v = 3, div = document.createElement('div'), all = div.getElementsByTagName('i');
    while (
        div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
        all[0]
    );
    return v > 4 ? v : false ;
}());

呵呵,能理解他的意图嘛?

说完IE浏览器了,我们来测试其他的浏览器:

var isChrome = !!window.chrome && !!window.chrome.webstore;

这句话用来判断是否属于chrome浏览器。

var isFF = !!window.sidebar;    

这句话用来判断是否属于Firefox浏览器。

var isSafari = /a/.__proto__=='//';   

这句话用来判断是否属于Safari浏览器。

哈哈,是不是越来越觉得很神奇呀,一般浏览器厂商在设计自己浏览器的时候,除了会遵守标准之外,还会加入自己的额外的标识,或者由于特殊的原因bug,才产生了那些黑魔法。

那么,你可能问了,我怎么才能知道这些浏览器的特性检测和怪癖检测呢?

你可以除了使用万能的谷歌,在多关注些前端牛人的博客。下面会给出一些帮助链接。

帮助链接

很全的一个浏览器hack方式的网址
前端牛人,司徒正美的博客
JavaScript判断IE浏览器的版本 文章的整理


两仪
9.6k 声望729 粉丝

向上努力、不卑不亢、两仪相生