一、识别浏览器是否支持某些特性
为了避免脚本在一些老版本的浏览器中出现问题,需要检查一下代码在那些浏览器中是否能够执行,这样做是很有必要的。在对某一浏览器检测就是为了确定代码是否可以在客户端上正常运行,因此,我们要将精力放在“检测浏览器可以做什么”上面,从需求方面来讲,这样做比“检测当前的浏览器是什么版本的何种浏览器”得到的效果会更好。要检测脚本是否可以在某浏览器上正常运行,简单的办法就是检测当前浏览器是否具有脚本中所需的特性,这样检测不仅简单,而且比直接检测浏览器更有意义。一定要用 typeof 来进行测试,杜绝用 if 来判断(要注意的一点是检测的如果是方法或者是函数不要带参数,否则,就变成了检测返回值);
var xmlHttpExists = typeof XMLHttpRequest;
而且这种测试方法还可以为那些不支持某些特性的浏览器提供相应的代码;
if(typeof document.designMode != 'undefined'){
document.designMode = "on";
}else{
...........
}
二、识别特殊的浏览器
虽然前面介绍的那种特性检测法很好,但是有的时候,浏览器可能以不正确的方式实现了某些特性,(即特性存在,只不过是返回的值不一样),下面有一个函数,结合了已知的特性识别方法和用户代理信息方法,这样即使某些浏览器使用了欺骗手段(模仿了另一种浏览器的用户代理字符串),仍可以准确无误地将它识别出来:
function identifyBrowser(){
var agent = navigator.userAgent.toLowerCase();
if ( typeof navigator.vendor != 'undefined' && navigator.vendor == 'KDE' && typeof window.sidebar != 'undefined'){
return "kde";
}else if(typeof window.opera != "undefined"){
var version = parseFloat(agent.replace(/.*opera[\/]([^ $]+).*/,"$1"));
if(version >= 7){
return "opera7";
}else if(version >=5){
return "opera5";
}
return false;
}else if(typeof document.all != 'undefined'){
说明:
应为navigator.vendor 为 'KDE' 的浏览器只有一种,那就 konqueror,因为 konqueror 3.2以前的版本提供的功能不完善,所以只需要检测该版本以及以后版本就可以了,上述的代码通过 window.sidebar 对象进行检测来实现这一点的,因为该对象只有3.2以后的版本才可用。
接下来,对opera 的检测,尽管它倾向于伪装成其他的浏览器,但是opera 是唯一具有 window.opera 对象的唯一浏览器。
完成opera的检测,就可以放心的运行 document.all的测试了,这是 IE 的一个属性,但是由于兼容性的原因 Opera 也使用这个属性,不过其他的浏览器都没有使用 document.all ,所以区分 ie 和其他的浏览器的一个好方法就是查看 document.all ,跟前面一样,完成这个判断之后,就可以安全地检查用户代理的字符串中是否含有'msie'了。在这个阶段,也可以将window下的 IE 和 Mac 操作系统下使用 ie 区分出来,因为后者没有其他版本ie所具有的 document.uniqueID 属性,所以如果这个属性不存在,那么客户端使用的 Mac 操作系统。
完成以上之后,就可以通过 doucment.getElementByID 将所有的老版本浏览器过滤掉,任何不支持该方法的浏览器几乎不支持 javascript ,所以对那些浏览器的过滤很合理的。如果浏览器支持这个方法,那么 Mozilla 和 safari 就可以被区分开来了。
尽管Safari 和MOzilla 非常相似,(甚至在用户代理字符串中都包含了"gecko"),但是它的 navigator.vendor 值总是 "Apple Computer,Inc".另外 Safari1.2版本相对于以前的版本有明显的改善,包括对XMLHttpRequest的支持,所以如果我们确实需要这个版本的safari,检测一下这个版本还是很值得的。
排除了 Safari 之后,就可以利用用户代理中的"gecko" 来检测Mozilla了,这个引擎的变种很多,这些变体的版本通常很难检测,但是如果确实想要支持它,则简单的通过 navigator.userAgent 判断即可。
对于上面没有提到的浏览器,我们就可以认为他们不支持Javascript和Dom,最后以返回false的方式处理。
调用以上的函数,会返回一个字符串,该字符串 会给出浏览器的类型以及版本。
下面的列表列出了,在不同浏览器下的返回值
浏览器 | identifyBrowser返回的字符串 |
Unsupported browsers | false |
Konqueror3.2及以上版本 | "kde" |
Opera 5和Opera 6 | "opera5" |
Opera 7及以上版本 | "opera7" |
Internet Explorer5 | "ie5" |
基于mac的Internet Explorer5 | "ie5mac" |
Internet Explorer5.5 | "ie5.5" |
Internet Explorer6及以上版本 | "ie6","ie7",etc |
Mozilla/FireFox | "mozilla" |
Safari1.0和1.1 | "safari1" |
Safari1.2+ | "safari2" |
除了识别浏览器之外,有时候为了解决问题,需要知道浏览器在什么操作系统下运行,这个信息就包括在用户代理字符串中,不过它的检测比较简单
function identifyOS(){
var agent = navigator.userAgent.toLowerCase();
if (agent.indexOf("win") != -1){
return "win";
}else if(agent.indexOf("mac") != -1){
return "mac";
}else{
return "unix";
}
return false;
}