由于每个浏览器都具有自己独到的扩展，所以在开发阶段来判断浏览器是一个非常重要的步骤。
1.Navigator 对象
JavaScript Navigator 对象包含了有关访问者浏览器的所有信息。
1.浏览器类型及版本号
appName：保存浏览器类型
appVersion：存有浏览器的版本信息（其他信息中的一项）
实例：
var browser = navigator.appName;
var version = navigator.appVersion;
console.log(browser,version);
上面例子中的 browser 变量存有浏览器的名称，比如，"Netscape" 或者 "Microsoft Internet Explorer"。
上面例子中的 appVersion 属性返回的字符串所包含的信息不止是版本号而已。我们可以使用一个名为 parseFloat() 的函数会抽取字符串中类似十进制数的一段字符并将之返回，这样我们就可以从字符串中抽出版本号信息了。
2.用户代理
userAgent：浏览器用户代理字符串，通过这组字符串，我们来获取当前浏览器的版本号、浏览器名称、系统名称。在每一次http请求过程中，用户代理字符串是作为响应首部发送的。在服务器端，通过检测用户代理字符串来确定用户使用的浏览器是一种常用而且广为接受的做法。
var userAgent=navigator.userAgent.toLowerCase();
var browser1={
version:(userAgent.match(/(?:firefox|opera|safari|chrome|msie)[\/: ]([\d.]+)/))[1],
safari:/version.+safari/.test(userAgent),
chrome:/chrome/.test(userAgent),
firefox:/firefox/.test(userAgent),
ie:/msie/.test(userAgent),
opera: /opera/.test(userAgent )
} /* 获得浏览器的名称及版本信息 */
2.能力检测
能力检测又称作为特性检测，检测的目标不是识别特定的浏览器，而是识别浏览器的能力。能力检测不必估计特定的浏览器，只需要确定当前的浏览器是否支持特定的能力，就可以给出可行的解决方案。
var EventUtil = {
addHandler: function(element, type, handler){ // 该方法接受 3 个参数：要操作的元素，事件名称和事件处理程序函数
if (element.addEventListener){ // 检查传入的元素是否存在 DOM2 级方法
element.addEventListener(type, handler, false); // 若存在，则使用该方法
} else if (element.addEvent){ // 如果存在的是 IE 的方法
element.attachEvent("on" + type, handler); // 则使用 IE 的方法，注意，这里的事件类型必须加上 "on" 前缀。
} else { // 最后一种可能是使用 DOM0 级
element["on" + type] = hander;
}
},
removeHandler: function(element, type, handler){ // 该方法是删除之前添加的事件处理程序
if (element.removeEventListener){ // 检查传入的元素是否存在 DOM2 级方法
element.removeEventListener(type, handler, false); // 若存在，则使用该方法
} else if (element.detachEvent){ // 如果存在的是 IE 的方法
element.detachEvent("on" + type, handler); // 则使用 IE 的方法，注意，这里的事件类型必须加上 "on" 前缀。
} else { // 最后一种可能是使用 DOM0 及方法 (在现代浏览器中，应该不会执行这里的代码)
element["on" + type] = null;
}
}
};
var btn =document.getElementById("mybtn");
var hander= function(){
alert("clicked");
};
上述代码检测不同浏览器对事件绑定的不同的支持方法。
要理解能力测试，需要注意两个方面。第一就是先检测达成目的的最常用的特性，对于前面的例子来说，就是要先检测element.addEventListener，后检测element.addEvent。先检测最常用的特性可以保证代码最优化，因为多数情况下都可以避免测试多个条件。
第二就是必须测试实际要用到的特性。一个特性不存在，不一定意味着另一个特性不存在。
3.怪癖检测（bug检测）
与能力检测类似，怪癖检测的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同，怪癖检测是想要知道浏览器存在什么缺陷(bug)。
bug 一般属于个别浏览器独有，在大多数新版本的浏览器被修复。
例如：IE8及更早版本中存在一个bug，即如果某个实例属性与[[Enumerable]]标记为false的某个原型属性同名，那么该实例属性将不会出现在for-in循环中。可以使用下面代码来检测这种“怪癖”。
var hasDontEnumQuirk = function(){
var box = {
toString : function () {} //创建一个toString()，和原型中重名了
};
for (var prop in box) {
if(prop == "toString"){
return false;
}
}
return true;
}();
上面代码通过一个匿名函数来测试该“怪癖”，函数中创建了一个带有toString()方法的对象。在正确的ECMAScriptr实现中，toString因该在for-in循环中作为属性返回。
网友评论