web开发的理想状态之一是浏览器支持一组最常用的功能,但是在现实情况下,浏览器间的差异非常大,因此,为了兼容大部分的了浏览器,开发人员首先需要设计最通用的方案,然后再使用客户端检测的技术增强该方案。客户端检测技术包括能力检测、怪癖检测、用户代理检测,下面我们一一介绍。

一、能力检测

   能力检测的目的不是为了识别浏览器,而是识别浏览器的能力;通过检测浏览器具有某种能力后,就可以给出对应的解决方案。如下例所示,IE5以及更早期的IE,不支持getElementById的方法来获取ID,但是支持document.all的类似方法。为了确保代码能在IE5中运行,应该对该功能进行检测。

function getElement(id) {
    if (document.getElementById) {
        return document.getElementById(id);
    }else if(document.all){
        return document.all[id];
    }else{
        throw new Error("no way to retrive this element.");
    }
}

二、怪癖检测

  与能力检测不同,怪癖检测是要确定浏览器存在什么缺陷,以确定某一特性不能正常工作。例如,IE8以及更高版本存在一个怪癖:如果某个实例属性与被标记为[[DontEnum]]的某个原型属性同名,那么这个实例属性不会出现在for in循环里。可以用如下代码来检测浏览器是否存在这个怪癖。

var hasDontEnumQuirk = function(){
    var o = {toString: function(){}};

    for(var i in o){
        if(i ==  "toString"){
            return false;
        }
    }
    return true;
}();

  另一个需要经常检测的怪癖是safari3之前的版本会枚举被隐藏的属性,可以通过以下代码检测,如果存在这个bug,就会返回两个toString的实例:

var hasShadowEnumQuirk = function(){
    var o = {toString: function(){}},
        count = 0;

    for(var i in o){
        if(i ==  "toString"){
            count++;
        }
    }
     return (count > 1);
}();

  如果浏览器存在这个bug,那么就会返回两个toString实例,count的值就为2。

三、用户代理检测

  客户端使用的检测技术就叫做用户代理检测。每一次发送http请求,用户代理字符串是作为响应首部发送的,在服务端,通过检测用户代理字符串来确定用户使用的浏览器是什么;而在客户端,通常是能力检测和怪癖检测都不能准确判断时,才使用户代理检测,因为这种方式对用户代理字符的依赖性很强。用户代理检测首先需要解决电子欺骗问题。所谓电子欺骗,就是指的浏览器通过在自己的用户代理字符串中加入一些错误或误导性的信息,来达到欺骗服务器的目的。为什么会出现电子欺骗呢?原来在web的发展过程中,浏览器在市场所占份额在不断变化,许多服务器在提供网页之前,都要专门检测浏览器的类型。如果不能通过这项检测,则用户就打不开网页。因此,新诞生的浏览器,很多都将自己的用户代理字符串加入了当时比较流行的浏览器的用户代理字符。

《JAVASCRIPT高级程序设计》客户端检测的更多相关文章

  1. Javascript高级程序设计——客户端检测

    ECMAScript虽然是Javascript的核心,但是要在web中使用Javascript,那么BOM才是核心,BOM为我们提供了操作访问浏览器对象的借口, 但是由于BOM没有标准规范,导致存在不 ...

  2. 9. javacript高级程序设计-客户端检测

    1. 客户端检测 1.1 能力检测 在编写代码之前先检测特定浏览器的能力. 1.2 怪癖检测 怪癖实际上是浏览器实现中的bug 1.3 用户代理检测 通过检测用户代理字符串来识别浏览器.用户代理字符串 ...

  3. 《JavaScript高级程序设计(第3版)》阅读总结记录第一章之JavaScript简介

    前言: 为什么会想到把<JavaScript 高级程序设计(第 3 版)>总结记录呢,之前写过一篇博客,研究的轮播效果,后来又去看了<JavaScript 高级程序设计(第3版)&g ...

  4. javascript高级程序设计阅读笔记(一)

    javascript高级程序设计阅读笔记(一) 工作之余开发些web应用作为兴趣,在交互方面需要掌握javascript和css.HTML5等技术,因此读书笔记是必要的. javascript简介 J ...

  5. JavaScript高级程序设计(第三版)学习笔记20、21、23章

    第20章,JSON JSON(JavaScript Object Notation,JavaScript对象表示法),是JavaScript的一个严格的子集. JSON可表示一下三种类型值: 简单值: ...

  6. 读书笔记(04) - 错误监控 - JavaScript高级程序设计

    错误类型 即时运行错误 (代码错误) 资源加载错误 常见的错误 1. 类型转换错误 建议使用全等===操作符 2.数据类型错误 建议加强类型判断 // 数组倒序 function reverseSor ...

  7. JavaScript高级程序设计第三版.CHM【带实例】

    从驱动全球商业.贸易及管理领域不计其数的复杂应用程序的角度来看,说 JavaScript 已经成为当今世界上最流行的编程语言一点儿都不为过. JavaScript 是一种非常松散的面向对象语言,也是 ...

  8. javascript高级程序设计学习笔记

    javascript高级程序设计,当枕头书已经好久了~zz  现在觉得自己在js的开发上遇到了一些瓶颈,归根究底还是基础太薄弱,所以重新刷一遍js高程希望有更新的认识. 一.javascript简介 ...

  9. JavaScript高级程序设计(第4版)pdf 电子书

    JavaScript高级程序设计(第4版)pdf 电子书 免责声明:JavaScript高级程序设计(第4版)pdf 电子书下载 高清收集于网络,请勿商用,仅供个人学习使用,请尊重版权,购买正版书籍. ...

  10. JavaScript高级程序设计(第4版)知识点总结

    介绍 JavaScript高级程序设计 第四版,在第三版的基础上添加了ES6相关的内容.如let.const关键字,Fetch API.工作者线程.模块.Promise 等.适合具有一定编程经验的 W ...

随机推荐

  1. HDU 2121 Ice_cream’s world II 最小树形图 模板

    开始学习最小树形图,模板题. Ice_cream’s world II Time Limit: 3000/1000 MS (Java/Others)    Memory Limit: 32768/32 ...

  2. ZooKeeper 的安装和配置---单机和集群

    如题本文介绍的是ZooKeeper 的安装和配置过程,此过程非常简单,关键是如何应用(将放在下节及相关节中介绍). 单机安装.配置: 安装非常简单,只要获取到 Zookeeper 的压缩包并解压到某个 ...

  3. (中等) POJ 1703 Find them, Catch them,带权并查集。

    Description The police office in Tadu City decides to say ends to the chaos, as launch actions to ro ...

  4. C++异常第二篇---C++标准库异常类exception的使用

    1 继承图示 2 具体讲解 C++标准库异常类继承层次中的根类为exception,其定义在exception头文件中,它是C++标准库所有函数抛出异常的基类,exception的接口定义如下: na ...

  5. js去除字符串空格

    str.replace(/\s+/g,""); str.replace(/\s|\xA0/g,""); empName=empName.replace(/^\s ...

  6. 你会做Web上的用户登录功能吗?

    Web上的用户登录功能应该是最基本的功能了,可是在我看过一些站点的用户登录功能后,我觉得很有必要写一篇文章教大家怎么来做用户登录功能.下面的文章告诉大家这个功能可能并没有你所想像的那么简单,这是一个关 ...

  7. TM一句备注讲清楚TCP3次握手

    1)C要跟S建立连接,现在,C向S发送连接建立标记SYN=1已经该次请求的序列号Seq=m. 2)S收到C的请求后,有空鸟C,那么,向C回发受勾信号ACK=1,已经该次约会的请求对应好ack=m+1 ...

  8. 编译uboot提示libasm-offsets.c10 error bad value (armv5)解决方法

    编译uboot-2016.09提示如下错误: lib/asm-offsets.c:1:0: error: bad value (armv5) for -march= switch 解决方法: 1.在命 ...

  9. UIButton样式设置

    btn.frame = CGRectMake(x, y, width, height); [btn setTitle: @”search” forState: UIControlStateNormal ...

  10. uWSGI参考资料(1.0版本的配置选项列表)

    Reference: http://blog.csdn.net/kevin6216/article/details/15378617 uWSGI参考资料(1.0版本的配置选项列表) 下面的内容包含了大 ...