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. php中__clone() shallow copy 只是浅复制

    什么是浅复制呢? 简单一点,就是说复制一个对象的时候,如果对象$Obj的一个属性的类型是引用类型的,比如 $person这个属性,指向的是一个 叫做 $objPerson的一个引用, 那么复制$Obj ...

  2. VS2012配置Cocos2d-x的问题

    cocos2d-x老是配置不成功,解决方案参考:http://blog.csdn.net/yangjingui/article/details/9408007 完整配置流程: 1 下载,最好通过SVN ...

  3. lvs(+keepalived)、haproxy(+heartbeat)、nginx 负载均衡的比较分析

    目前使用比较多的就是标题中提到的这两者,其实lvs和haproxy都是实现的负载均衡的作用,keepalived和heartbeat都是提高高可用性的,避免单点故障.那么他们为什么这么搭配,而又有什么 ...

  4. Classification of text documents: using a MLComp dataset

    注:原文代码链接http://scikit-learn.org/stable/auto_examples/text/mlcomp_sparse_document_classification.html ...

  5. mysql--学生课程成绩表

    创建表student: CREATE TABLE `student` ( `sid` INT(11) NOT NULL AUTO_INCREMENT, `sname` VARCHAR(20) NOT ...

  6. CSU 1515 Sequence

    莫队算法+map #include<cstdio> #include<cstring> #include<cmath> #include<map> #i ...

  7. css01

      1.  常用属性:①color:文本颜色:②background-color:背景颜色:③font-size:文字大小: 2.  样式声明:①内部样式:style=“样式规则:”,写于作用标签内, ...

  8. leetcode--010 Linked List Cycle II

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAApAAAACICAIAAADfzUzYAAANeklEQVR4nO3dQa7bthbG8W4mK/A+so

  9. LIBPNG

    libpng 库的源码包中有个 example.c ,里面包含PNG文件读/写的示例代码,参考示例代码和注释(虽然是英文的),可以了解大致的用法. 以下是读取PNG图片的图像数据的代码,使用前还需要按 ...

  10. css 之!important

    主要是自己犯了个错误: 把 !important 放到了分号后面; 正确写法写法: .current{ background-color: #f1f1f1; border-left: 2px soli ...