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. iOS之UITableView的上拉刷新

    #import "ViewController.h" #import "UITableView+PullRefresh.h" @interface ViewCo ...

  2. git使用系列(一)

    git commit 的时候出现了问题: change not staged for commit. no changes added to commit(use "git add" ...

  3. GIT使用规范流程

    1:每次开发新功能时,都应该新建立一个独立的分支(branch),整个项目工程有且只有一个主分支(master branch),项目发版时是从主分支上发布. Step01:切换到主分支 $ git c ...

  4. PHP和MySQL Web开发(原书第4版) 高清PDF+源代码

    PHP和MySQL Web开发(原书第4版) 高清PDF+源代码 [日期:2014-08-06] 来源:Linux社区  作者:Linux [字体:大 中 小]     内容简介 <PHP和My ...

  5. python--字符串操作(删除,替换)

    示例: 替换字符串开头和结尾处的空格 1. [代码][Python]代码     跳至 [1] [全屏预览] view source print? 01 # -*- coding: utf-8 -*- ...

  6. Zabbix日志错误总结(持续更新)

    no active checks on server [*.*.*.*:10051]: host [*] not found failed to accept an incoming connecti ...

  7. SQL Server 2012 - 数据表的操作

     unicode:双字节编码      variable:可变的    character:字符 T-SQL:  Transact Structured Query Language unique:唯 ...

  8. 一起学JUCE之HashMap

    基于哈希表的 Map 接口的实现.此实现提供所有可选的映射操作,并允许使用 null 值和 null 键.(除了非同步和允许使用 null 之外,HashMap 类与 Hashtable 大致相同.) ...

  9. EasyUI datagrid 的checkbox设置

    参考url: http://blog.csdn.net/baronyang/article/details/9323463 我的需求: 抓取数据生成的日志,日志中有部分是抓取失败的,需要将失败的发送到 ...

  10. jade的特点

    jade特点 1超强的可读性 2灵活易用的缩进 3块扩展 4代码默认进过编码处理,以增强安全性 5编译及运行时的上下文错误报告 6命令行编译支持 7html5模式(使用 !!!5文档类型) 8可选的内 ...