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 foreach 遍历数组是打印出相同的数据

    https://www.toptal.com/php/10-most-common-mistakes-php-programmers-make PHP makes it relatively easy ...

  2. struts2使用iterator标签显示嵌套Map - 云自无心水自闲 - BlogJava

    ">            <s:iterator value="dataMap.keySet()" id="class">     ...

  3. iOS KVC setValuesForKeysWithDictionary的使用

    Key Value Coding Key Value Coding是cocoa的一个标准组成部分,它能让我们可以通过name(key)的方式访问property, 不必调用明确的property ac ...

  4. hdu 2614

    #include<stdio.h> int map[99][99]; int vist[99]; int sum=1; int maxsum=1; int max=0; int N; vo ...

  5. 【转】25个Git用法技巧

    Andy Jeffries 给 Git 中级用户总结分享的 25 个小贴士.你不需要去做大量搜索,或许这些小贴士对你就很有帮助的. 我从开始使用git到现在已经差不多18个月了,以为自己已经很懂git ...

  6. MySQL性能分析及explain的使用说明

    1.使用explain语句去查看分析结果 如explain select * from test1 where id=1;会出现:id selecttype table type possible_k ...

  7. PHP读取Excel文件(PHPExcel)

    /*     * 读取Excel文件     * */    require_once (dirname(dirname(dirname(__FILE__))).'/PHPExcel/PHPExcel ...

  8. CSS border三角、圆角图形生成技术简介

    http://www.zhangxinxu.com/wordpress/?p=794 一.前言 利用CSS的border属性可以生成一些图形,例如三角或是圆角.纯粹的CSS2的内容,没有兼容性的问题, ...

  9. object-c中的BOOL类型

    object-c中的布尔类型比C语言中的bool类型早了10年,它具有YES和NO两种值.在object-c中的布尔类型BOOL实际上是一种带符号的字符类型(signed char),它使用的空间是1 ...

  10. 详解Grunt插件之LiveReload实现页面自动刷新(两种方案)

    http://www.jb51.net/article/70415.htm    含Grunt系列教程 这篇文章主要通过两种方案详解Grunt插件之LiveReload实现页面自动刷新,需要的朋友可以 ...