细说浏览器特性检测(1)

其最经典的运用莫过于通用的addEvent函数: function addEvent(element, type, handler) { if (element.attachEvent) { //IE8及以下浏览器 element.attachEvent('on' + type, handler); } else { //W3C标准浏览器 element.addEventListener(type, handler, false); } };

函数可以通过检测attachEvent函数是否存在,以决定使用attachEvent或者addEventListener,这也是最简单的一种特性检测,因而通常在需要时才进行实时的检测。另一种特性检测由于检测的过程较为麻烦,因此会预先完成检测,将检测的结果(通常是Boolean类型)保存在某个变量中。

本文的主要目标是分析、说明在jQuery1.4中浏览器特性检测新增的内容,同时加深浏览器兼容性方面几个细节的记忆。

jQuery1.4主要增加了以下几个浏览器特性标识,本文针对它们一一进行分析:

1.4版本引入,决定没有设置value值的checkbox是否有默认的value值”on”。 1.4.3版本引入,决定select元素的第一个option元素是否会默认被选中。 1.4.3版本引入,决定当select元素设置为disabled后,其所有option子元素是否也会被设置为disabled。 1.4.1版本引入,决定对DocumentFragment使用cloneNode函数时是否会将radio和checkbox的checked属性保留。 1.4.3版本引入,决定在IE下一个block元素拥有hasLayout属性并有display: inline;时,是否会按inline-block显示。 1.4.3版本引入,决定在IE下一个元素拥有hasLayout属性和固定的width/height时,是否不会被子元素撑大。 1.4.3版本引入,决定一个td或th元素设置为display: none;时,是否还有offsetHeight。  
checkOn

使用以下代码可以检测该特性:

<input type="checkbox" /> <script type="text/javascript"> alert(document.getElementById('checkOn').value); </script>

以下为各浏览器中运行结果:

IE6   on  
IE7   on  
IE8   on  
IE9 beta   on  
Firefox 3.6   on  
Chrome 7   [空字符串]  
Safari 5   on  

经测试,除Chrome外,所有浏览器都会给没有value的checkbox一个默认的value值”on”。

该特性被jQuery用来获取checkbox和radio的值,兼容的判断语句如下:

//不支持checkOn的浏览器都不存在property/attribute混用问题,因此需要明确使用getAttribute return support.checkOn ? element.value : (element.getAttribute('value') === null ? 'on' : element.value); optSelected

使用以下代码可以检测该特性:

<select> </select> <script type="text/javascript"> var select = document.getElementById('optSelected'), option = document.createElement('option'); select.appendChild(option); alert(option.selected); </script>

以下为各浏览器中运行结果:

IE6   false  
IE7   false  
IE8   false  
IE9 beta   false  
Firefox 3.6   true  
Chrome 7   true  
Safari 5   false  

经测试,IE系列和Safari使用appendChild对空的select元素添加一个option后,该option的selected属性不会被默认设置为true。

该问题引起的BUG描述如下:

部分浏览器在获取option的selected属性时,会错误地返回false。

该问题的解决方案是在访问selected属性时,先访问其父级select元素的selectedIndex属性,强迫浏览器计算option的selected属性,以得到正确的值。需要注意的是option元素的父元素不一定是select,也有可能是optgroup。具体代码如下:

if (!support.optSelected) { var parent = option.parentNode; parent.selectedIndex; //处理optgroup时的情况 if (parent.parentNode) { parent.parentNode.selectedIndex; } } return option.selected; optDisabled

使用以下代码可以检测该特性:

<select disabled="disabled"> <option></option> </select> <script type="text/javascript"> var select = document.getElementById('optDisabled'), option = select.getElementsByTagName('option')[0]; alert(option.disabled); </script>

以下为各浏览器中运行结果:

IE6   false  
IE7   false  
IE8   false  
IE9 beta   false  
Firefox 3.6   false  
Chrome 7   false  
Safari 5   true  

经测试,Safari会将设置了disabled的select中的option也同样设置上disabled。

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdxyjp.html