前言
在《微插件推荐系列: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,才产生了那些黑魔法。
那么,你可能问了,我怎么才能知道这些浏览器的特性检测和怪癖检测呢?
你可以除了使用万能的谷歌,在多关注些前端牛人的博客。下面会给出一些帮助链接。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。