javascript客户端检测 记录一些“怪癖”

标签：

因为市面上多种浏览器之间的差异，和不同浏览器的“怪癖”，所以我们在开发时可能需要客户端检测，确保自己的代码能顺利的在全部浏览器上运行

第一种最常用的客户端检测——能力检测。能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力

if(object.propertyInQuestion){
    //使用object.propertyInQuestion
}

就是在运行代码之前检查浏览器是否支持要用到的方法或属性，如果不能就运行针对性的代码

第二种客户端检测——“怪癖”检测的目标是识别浏览器的特殊行为，但与能力检测确认浏览器支持什么能力不同，怪癖检测时想知道浏览器存在什么缺陷（也就是bug）

今天在读书的时候发现许多这种怪癖，突然想到了以前看一份面试题的时候有一道让你述说你见过的bug，那就顺便记一下

1. IE8及更早版本中存在一个bug，即如果某个实例属性与[[Enumerable]]标记为false的某个原型属性同名，那么该实例属性将不会出现在for—in循环当中
2. Safari 3以前版本会枚举被隐藏的属性
3. cloneNode（）方法不会复制添加到DOM节点中的javascript属性，例如事件处理程序等，IE在此存在一个bug，即它会复制事件处理程序

4. <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之前的版本不会为空白符创建节点

5. IE8及较低版本不区分ID的大小写，如果页面中多个元素的的ID值相同，getElementById()只返回文档中第一次出现的元素
6. IE7及以下版本有一个有意思的怪癖：name特性与给定ID匹配的表单元素（<input>,<textarea>,<button>及<select>）也会被该方法返回

   <input type="text" name="myElement" value="Text" />
   <div id="myElement">A div</div>

   调用document.getElementById("myElement")，结果会返回<input>元素

7. 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操作系统、移动设备和游戏系统   有需要的可以查询

javascript客户端检测 记录一些“怪癖”

标签：

原文地址：http://www.cnblogs.com/guoshiwei/p/4915419.html