zoukankan      html  css  js  c++  java
  • 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操作系统、移动设备和游戏系统   有需要的可以查询

  • 相关阅读:
    打印空格
    进程间的通信
    堆排序算法
    大小端的判断
    bash help
    [Android] How to disable the screen orientation?
    图片的静态动态显示效果
    WPF Threads: Build More Responsive Apps With The Dispatcher
    用node.js+express自建网站发布静态网页
    利用Apache mod_expires 与 mod_headers 实现文件缓存及mod_deflate压缩输出
  • 原文地址:https://www.cnblogs.com/guoshiwei/p/4915419.html
Copyright © 2011-2022 走看看