因为市面上多种浏览器之间的差异,和不同浏览器的“怪癖”,所以我们在开发时可能需要客户端检测,确保自己的代码能顺利的在全部浏览器上运行
第一种最常用的客户端检测——能力检测。能力检测的目标不是识别特定的浏览器,而是识别浏览器的能力
if(object.propertyInQuestion){ //使用object.propertyInQuestion }
就是在运行代码之前检查浏览器是否支持要用到的方法或属性,如果不能就运行针对性的代码
第二种客户端检测——“怪癖”检测的目标是识别浏览器的特殊行为,但与能力检测确认浏览器支持什么能力不同,怪癖检测时想知道浏览器存在什么缺陷(也就是bug)
今天在读书的时候发现许多这种怪癖,突然想到了以前看一份面试题的时候有一道让你述说你见过的bug,那就顺便记一下
- IE8及更早版本中存在一个bug,即如果某个实例属性与[[Enumerable]]标记为false的某个原型属性同名,那么该实例属性将不会出现在for—in循环当中
- Safari 3以前版本会枚举被隐藏的属性
- cloneNode()方法不会复制添加到DOM节点中的javascript属性,例如事件处理程序等,IE在此存在一个bug,即它会复制事件处理程序
-
<ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> var myList = document.getElementsByTagName("ul"); var deepList = myList.cloneNode(true); alert(deepList.childNodes.length); //3(IE<9) 或7(其他浏览器)
IE8及更早版本与其他浏览器处理空白字符的方式不一样,IE9之前的版本不会为空白符创建节点
- IE8及较低版本不区分ID的大小写,如果页面中多个元素的的ID值相同,getElementById()只返回文档中第一次出现的元素
- IE7及以下版本有一个有意思的怪癖:name特性与给定ID匹配的表单元素(<input>,<textarea>,<button>及<select>)也会被该方法返回
<input type="text" name="myElement" value="Text" /> <div id="myElement">A div</div>
调用document.getElementById("myElement"),结果会返回<input>元素
- IE7以前,通过getAttribute()方法访问style特性(返回一个对象)或者onclick这样的事件处理 特性时(返回一个函数),返回的值与属性的值相同,同时setAttribute()存在一些异常行为。通过这个方法设置的class和style特性,没有任何效果,设置事件处理程序特性是也一样
还有许多怪癖,以后遇到了再说,不过感受到了这个行业对IE深深的恶意,简直是整个世界都在针对IE啊
第三种客户端检测—— 用户代理检测
就是直接判断你到底是使用哪个牌子的浏览器、什么呈现引擎、什么版本、什么平台。
呈现引擎:
主要有五大呈现引擎: IE, Gecko, Webkit, KHTML, Opera
IE就是IE浏览器了
Gecko 是Firefox的呈现引擎
Webkit Safari浏览器 Chrome浏览器(他的呈现引擎还是Webkit,只不过是使用了不同的javascript引擎) Webkit原来是KHTML呈现引擎原来的一个分支,后来独立出来开源,专注呈现引擎开发
KHTML konqueror浏览器 只能在linux中使用
Opera(Presto) Opera浏览器
javascript高级程序设计 上有完整的用户代理检测脚本代码,包括了检测呈现引擎、平台、Windows操作系统、移动设备和游戏系统 有需要的可以查询