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

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