检测属性是否被支持
根据对象属性和/或者对象方法是否被支持来把代码进行条件分支。举例来说,在 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"); }