对象检测和浏览器嗅探技术

检测属性是否被支持

 

根据对象属性和/或者对象方法是否被支持来把代码进行条件分支。举例来说，在 IE6浏览器上，

document.body对象包含一个名为scrollTop的属性，用来确定鼠标事件发生时，鼠标y轴在页面上的位置（不仅指页面的可视部分）。

为了确保浏览器对scrollTop 属性的支持作如下做检测：

if (document.body.scrollTop) {

// statements that work with scrollTop property

}

然而问题（脚本错误）还是出现了，出现在当这个document.body对象浏览器不支持时。所以为了避免这种错误，表达式必须首先测试document.body对象是否存在，然后再测试其属性是否存在：

if (document.body && document.body.scrollTop) {

// statements that work with scrollTop property

}

 

PS:

在使用属性检测之前，您需要知道正在被检测的属性的数据类型和缺省值。如果浏览器支持的属性值为0或者一个空的字符串，则包含该属性的引用的if 条件表达式的求值结果就将等于false（假），这会导致该属性不存在的假象，而实际上该属性是存在的。

此时应该采取如下一种更为精确保险的方法（typeof）。譬如如果您正在测试的属性总是返回一个字符串（无论这个字符串是空字符串，还是带有文本）其条件表达式大致如下：：

if (typeof someObject.someProperty == "string") {

// property exists, so use it

}

也可通过以下方法确认该类型是否为除undefined之外的值，来检测属性是否存在：

if (typeof someObject.someProperty != "undefined") {

// property exists, so use it

}

 

检测方法是否被支持

由于对象方法（方法名后不能有圆括号）在求值时会返回一个值，您可以在条件表达式中引用一个对象方法，就好象引用对象属性一样。举例说看看浏览器是否支持document.getElementById()方法，则用这样的结构进行测试：

if(document.getElementById){

       //supports the method,go for it!

}

 什么时候使用区分浏览器的方法

您可能偶尔会碰到一些问题，需要使用老式的区分浏览器版本的方法才能解决。一般来说，这些问题限制在已知的软件缺陷，或者某个对象在某个浏览器版本上有“可选行为”的时候。您需要回到老的navigator.userAgent属性解析的方法。

 

采取对象检测或者客户终端嗅探技术的时候应该从实际需求出发。

每个页面的兼容性目标和对象检测的需求在某种程度上是不一样的。很难明确地描述一个如何进行对象检测的模板。在实现对象检测的过程中，可能最重要的一个步骤是明确您的需求。

 

 

浏览器嗅探技术

由于目前存在的浏览器版本变种如此之多，浏览器的识别--即通过考察navigator对象的属性来获得版本信息--在很大程度上变得不可管理。

 

第1种：

var browser = navigator.appName
    var b_version = navigator.appVersion
    var version = b_version.split(";");
var trim_Version = version[1].replace(/[ ]/g, "");
if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE6.0") {
    alert("IE 6.0");
} else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE7.0") {
    alert("IE 7.0");
} else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE8.0") {
    alert("IE 8.0");
} else if (browser == "Microsoft Internet Explorer" && trim_Version == "MSIE9.0") {
    alert("IE 9.0");
}

 

 第2种： 

if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE6.0") {
    alert("IE 6.0");
} else if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE7.0") {
    alert("IE 7.0");
} else if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE8.0") {
    alert("IE 8.0");
} else if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.split(";")[1].replace(/[ ]/g, "") == "MSIE9.0") {
    alert("IE 9.0");
}

 

 第3种：

if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/7./i) == "7.") {
    alert("IE 7.0");
} else if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/8./i) == "8.") {
    alert("IE 8.0");
} else if (navigator.appName == "Microsoft Internet Explorer" && navigator.appVersion.match(/9./i) == "9.") {
    alert("IE 9.0");
} else if (navigator.appName == "Microsoft Internet Explorer") {
    alert("IE 6.0");
}

 

 

参考http://www.w3school.com.cn/htmldom/dom_obj_navigator.asp