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. Sublime 2 配置

    在队友的推荐下,爱上了这款神一样的文本编辑器,熟练之后编辑效率真心是大幅提升啊. 一.Package Control Sublime拥有很强大的插件功能,而自带的缺少个管理工具,这个包可以用来很方便地 ...

  2. STM32 的加密实现(转)

    源:STM32 的加密实现 基于STM32F103的ID号对应用程序的保护方法 目的:对运行于STM32的嵌入式代码程序进行加密 编译环境:IAR Embedded System for ARM5.5 ...

  3. VS2010与SVN

    http://blog.sina.com.cn/s/blog_4fe44775010182yl.html 在VS2010中使用SVN,必须先安装SVN的客户端,再安装VisualSVN(SVN的插件) ...

  4. PHP 安装 redis、memcached、openssl、pdo_mysql等

        PHP openssl 扩展的安装 这些插件可以通过在 php.ini 中添加 extension 的方式来加载所需要的插件,其实在 php 的安装包里就已经有相关的插件代码包了,在 php7 ...

  5. [iOS Animation]-CALayer 定时器动画

    定时器的动画 我可以指导你,但是你必须按照我说的做. -- 骇客帝国 在第10章“缓冲”中,我们研究了CAMediaTimingFunction,它是一个通过控制动画缓冲来模拟物理效果例如加速或者减速 ...

  6. 8、手把手教你Extjs5(八)自定义菜单2

    这一节来定义另外三种类型的菜单类.首先定义菜单按钮类.文件放于app/view/main/region目录下面,文件名为ButtonMainMenu.js. /** * 显示在顶部的按钮菜单,可以切换 ...

  7. spring 5种通知

    方法实现接口 package com.cn.spring.aop.impl; //加减乘除的接口类 public interface ArithmeticCalculator { int add(in ...

  8. Android小功能之垂直滚动条

    <?xml version="1.0" encoding="utf-8"?> <ScrollView xmlns:android=" ...

  9. STM32驱动W25X64存储器

    W25X64 是华邦公司推出的大容量 SPI  FLASH 产品,W25X64 的容量为 64Mbit(8M),该系列还有 W25Q80/16/32 等.W25X16,W25X32,W25X64分别有 ...

  10. python基础(二)字符串內建函数详解

    字符串 定义:它是一个有序的字符的集合,用于存储和表示基本的文本信息,''或""或''' '''中间包含的内容称之为字符串特性:1.只能存放一个值2.不可变,只能重新赋值3.按照从 ...