JavaScript高级程序设计7--客户端检测

最新推荐文章于 2018-04-25 17:09:27 发布
最新推荐文章于 2018-04-25 17:09:27 发布
阅读量386 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zl_best/article/details/53576274
版权
由于浏览器间存在差别，通常需要根据不同浏览器的能力分别编写不同的代码，而针对客户端检测方法最常用的有以下几种：
一、能力检测
能力检测的目标不是识别特定的浏览器，而是识别浏览器的能力。比如，脚本在调用某个函数之前，可能要先检测该函数是否存在。
能力检测的基本模式：
 
if (object.propertyInQuestion){
	//使用onject.propertyInQuestion
}
二、怪癖检测
怪癖检测的目标是识别浏览器的特殊行为，即想要知道浏览器存在什么缺陷。例如早期的WebKit中存在一个怪癖，即它会在for-in循环中返回被隐蔽的属性。
三、用户代理检测
用户代理检测通过检测用户代理字符串来确定实际使用的浏览器。它通过JavaScript的navigator.userAgent属性访问。 
var client = function() {
  // 呈现引擎
  /**
  * 每个呈现引擎都对应着一个属性，默认值为0，如果检测到哪一个呈现引擎，就将该引擎的版本号以浮点数值
  * 形式写入相应的属性。呈现引擎的完整版本号则以字符串形式写入 ver 属性.
  */
  var engine = {
    ie: 0,
    gecko: 0,
    webkit: 0,
    khtml: 0,
    opera: 0,


    // 完整的版本号
    var: null
};


  // 浏览器
  /**
  * 与 engine 变量一样，除了当前使用的浏览器，其他属性的值都保持为0。当前浏览器的这个属性保存的是
  * 浮点数值形式版本号。 ver 同上。
  */
  var browser = {
  // 主要的浏览器
    ie: 0,
    firefox: 0,
    safari: 0,
    konq: 0,
    opera: 0,
    chrome: 0,


    // 具体的版本号
    ver: null
};


  // 平台、设备和操作系统
  /**
  * 与呈现引擎不同，在不能访问操作系统或版本的情况下，平台信息通常是很有限的。对这三个平台，浏览器
  * 一般只报告 Windows 版本。所以新变量 system 的每个属性最初值都保存着布尔值 false。
  * 在确定平台时，检测 navigator.platform 要比检测用户代理字符串更简单，后者在不同浏览器中会给出
  * 不同的平台信息。navigator.platform 属性可能的值包括：
  * "Win32"、"Win64"、"MacPPC"、"MacIntel"、"X11" 和 "Linux i686"
  * 这些值在不同浏览器都是一致的。
  */
  var system = {
    win: false,/*Windows*/
    mac: false,/*Mac*/
    x11: false,/*Unix*/


    // 移动设备
    iphone: false,
    ipod: false,
    ipad: false,
    ios: false,
    android: false,
    nokiaN: false,
    winMobile: false,


    // 游戏系统
    wii: false,/*任天堂*/
    playstation: false /*playstation 3,简称 PS3*/
};


  // 检测呈现引擎和浏览器
  var ua = navigator.userAgent;
  /**
  * 要识别 opera，必须得检测 window.opera 对象。Opera 5及更高版本中都有这个对象。在 Opera 7.6       
  * 及更高版本中，调用 Version() 方法可以返回一个表示浏览器版本的字符串，而这也是确定 Opera 版本
  * 号的最佳方式。至于要检测更早版本的 Opera，可以直接检查用户代理字符串，因为早期版本不支持隐藏身
  * 份。但是在 07年底 Opera 的最高版本已经是 9.5 了，所以现在不太可能有人还在使用 7.6 之前的版本。
  */
  if (window.opera) {
    engine.ver = browser.ver = window.opera.version();
    engine.opera = browser.opera = parseFloat(engine.ver);
} 
  /**
  * WebKit 的用户代理字符串中的 "AppleWebKit"是独一无二的，所以检测这个字符串最合适。
  * eg:
  * "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_11_3) AppleWebKit/537.36 (KHTML, like Gecko)       
  * Chrome/48.0.2564.116 Safari/537.36"
  */
  else if (/AppleWebKit\/(\S+)/.test(ua)) {
    engine.ver = RegExp["$1"];
    engine.webkit = parseFloat(engine.ver);


    // 此时确定是 Chrome 还是 Safari
    if (/Chrome\/(\S+)/.test(ua)) {
        browser.ver = RegExp["$1"];
        browser.chrome = parseFloat(browser.ver);
    } else if (/Version\/(\S+)/.test(ua)) {
        browser.ver = RegExp["$1"];
        browser.safari = parseFloat(browser.ver);
    } else {
        // 近似确定版本号
        var safariVersion = 1;
        if (engine.webkit < 100) {
            safariVersion = 1;
        } else if (engine.webkit < 312) {
            safariVersion = 1.2;
        } else if (engine.webkit < 412) {
            safariVersion = 1.3;
        } else if (engine.webkit < 523) {
            safariVersion = 2;
        } else if (engine.webkit < 525) {
            safariVersion = 3;
        } else {
            safariVersion = 3.1;
        }


        browser.safari = browser.ver = safariVersion;
    } 
} 
  /**
  * 先检测 KHTML,因为 KHTML 的 UA 中也包含了 "Gecko",因此在排除 KHTML 之前，我们无法准确检测基于
  * Gecko 的浏览器。
  * KHTML 与 WebKit 的版本号在 UA 中的格式差不多，因此用了类似的正则表达式。但由于在 Konqueror 
  * 3.1 及更高的版本中不包含 KHTML 的版本，所以要使用 Konqueror 的版本来代替，所以有了后面的正则
  * 表达式。
  */
  else if (/KHTML\/(\S+)/.test(ua) || /Kongqueror\/([^;]+)/.test(ua)) {
        engine.ver = browser.ver = RegExp["$1"];
        engine.khtml = browser.konq = parseFloat(engine.ver);
} 
  /**
  * Gecko 的版本号不会出现在字符串 "Gecko" 的后面，而是会出现在字符串 "rv:" 的后面。
  */
  else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
        engine.ver = RegExp["$1"];
        engine.gecko = parseFloat(engine.ver);
    // 确定是不是 Firefox
    if (/Firefox\/(\S+)/.test(ua)) {
        browser.ver = RegExp["$1"];
        browser.firefox = parseFloat(browser.ver);
    }
} 
  // IE 的版本号位于字符串 "MSIE" 的后面，一个分号的前面
  else if (/MSIE ([^;]+)/.test(ua)) {
        engine.ver = browser.ver = RegExp["$1"];
        engine.ie = browser.ie = parseFloat(engine.ver);
}


  // 检测浏览器
  // browser.ie = engine.ie;
  // browser.opera = engine.opera;


  // 检测平台
  var p = navigator.platform;
  system.win = p.indexOf("Win") == 0;
  system.mac = p.indexOf("Mac") == 0;
  system.x11 = (p == "X11") || (p.indexOf("Linux") == 0);


  // 检测 Windows 操作系统
  // 第一个捕获组匹配 95、98、9x、NT、ME 或 XP，第二个捕获组只针对 Windows ME 及所有 Windows
  // NT 的变体。
  /**
  * 要理解下面的正则表达式，首先要知道不同浏览器在表示不同的 Windows 操作系统时给出的不同字符串。
  * windows版本    IE4+          Gecko          Opera<7          0pera7+      WebKit
  *    95      " Windows 95"    "Win95"      "Windows 95"     "Windows 95      n/a
  *    98       "Windows 98"    "Win98"      "Windows 98"     "Windows 98"     n/a
  *  NT 4.0     "Windows NT"   "WinNT4.O"    "Windows NT 4.O" "Windows NT 4.0" n/a
  *   2000   "Windows NT 5.0" "Windows NT 5.O""Windows 2000"  "Windows NT 5.O" n/a
  *    ME       "Win 9x 4.90" "Win 9x 4.90"   "Windows ME"    "Win 9x 4.90"    n/a
  *    XP  "Windows NT 5.1" "Windows NT 5.1""Windows XP"   "Windows NT 5.1""Windows NT 5.1"
  *  Vista "Windows NT 6.0" "Windows NT 6.0"    n/a        "Windows NT 6.0""Windows NT 6.0"
  *    7   "Windows NT 6.1" "Windows NT 6.1"    n/a        "Windows NT 6.1""Windows NT 6.1"
*/
  if (system.win) {
    if (/Win(?:dows )?([^do]{2})\s?(\d+\.\d+)?/.test(ua)) {
        if (RegExp["$1"] == "NT") {
            switch(RegExp["$2"]) {
              case "5.0":
                system.win = "2000";
                break;
              case "5.1":
                system.win = "XP";
                break;
              case "6.0":
                system.win = "Vista";
                break;
              case "6.1":
                system.win = 7;
                break;
              default:
                system.win = "NT";
                break;
            }
        } else if (RegExp["$1"] == "9x") {
            system.win = "ME";
        } else {
            system.win = RegExp["$1"];
        }
    }
}


  // 移动设备
  system.iphone = ua.indexOf("iPhone") > -1;
  system.ipad = ua.indexOf("iPad") > -1;
  system.ipod = ua.indexOf("iPod") > -1;
  system.nokiaN = ua.indexOf("nokiaN") > -1;


  // windows mobile，简称 Windows CE，用于 Pocket PC 和 Smartphone 中。
  /**
  * 在 Windows Mobile 5.0 及以前版本，上面两种设备的 UA 很相似，比如：
  * Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; PPC; 240x320)
  * Mozilla/4.0 (compatible; MSIE 4.01; Windows CE; Smartphone; 176x220)
  * 因为在 Windows Mobile 5.0 以后版本的浏览器中，移除了上面的记号 "PPC" 和 "Smartphone"，
  * 所以不建议测试字符串中的 "PPC" 和 "Smartphone"。一般情况下，只是到某个设备使用的是 Windows
  * Mobile 就足够了。
  * Windows Phone 7 的 UA 稍有改进，基本格式如下：
  * Mozilla/4.0 (compatible; MSIE 7.0; Windows Phone OS 7.0; Trident/3.1; IEMobile/7.0)
  * Asus; Galaxy6
  * 其中，Windows 操作符的标识符与以往完全不同，在这个用户代理中， client.system.win == "Ph"
  */
  if (system.win == "CE") {
    system.winMobile = system.win;
  } else if (system.win == "Ph") {
    if(/Windows Phone OS (\d+\.\d+)/.test(ua)) {
        system.win = "Phone";
        system.winMobile = parseFloat(RegExp["$1"]);
    }
  }


  // 检测 iOS 版本
  /**
  * iOS 3 之前，UA 只包含 "CPU like Max OS",后来 iPhone 中又改成 "CPU iPhone OS 3_0 like Mac
  * OS X", iPad 中又改成 "CPU OS 3_2 like Mac OS X"。
  */
  if (system.mac && ua.indexOf("Mobile") > -1) {
    if (/CPU (?:iPhone )?OS (\d+_\d+)/.test(ua)) {
        system.ios = parseFloat(RegExp.$1.replace("_","."));
    } else {
        system.ios = 2;// 因为没有办法确定到底是什么版本，所以设置为更早的版本比较稳妥。
    }
  }


  // 检测 Android 版本,只需简单的获取字符串 "Android" 紧随其后的版本号
  if (/Android (\d+\.\d+)/.test(ua)) {
    system.android = parseFloat(RegExp.$1);
  }


  // 游戏系统
  system.wii = ua.indexOf("Wii") > -1;
  system.playstation = /playstation/i.test(ua);


  // 返回这些对象
  return {
    engine: engine,
    browser: browser,
    system: system
  };
}();
有了上面的脚本，我们就可以这样方便的使用了。
比如： 
// 区分浏览器
if (client.engine.webkit) {
  if (client.browser.chrome) {
    // 执行针对 chrome 的代码
  } else if (client.browser.safari) {
    // 执行针对 safari 的代码
    }
} else if (client.engine.gecko) {
    if (client.browser.firefox) {
        // 执行针对 firefox 的代码
    } else {
        // 执行针对其他 gecko 的浏览器代码
    }
  }


// 区分系统
if (client.system.win) {
  if (client.system.win == "XP") {
    // 说明是 XP
  } else if (client.system.win == "Vista") {
    // 说明是 Vista
  }
}


// 移动端
if (client.system.webkit) {
  if (client.system.ios) {
	//针对IOS的操作
  } else if (client.system.android) {
	//针对android的操作
  }
}
在决定使用哪种客户端检测方法时，一般应优先考虑使用能力检测。怪癖检测是确定应该如何处理代码的第二选择。而用户代理检测则是客户端检测的最后一种方案，因为这种方法对用户代理字符串具有很强的依赖性。
木槿花开lalala
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript高级程序设计（第三版）学习笔记1~5章
10-22
《JavaScript高级程序设计（第三版）》是学习JavaScript的重要参考资料，涵盖了许多核心概念和技术。以下是该书前五章主要知识点的详细讲解： 1. 在HTML中使用JavaScript： - `<script>`标签用于引入JavaScript...
搜集整理的前端面试题1
遇见更好的自己
10-26 2584
1.    Doctype作用？标准模式与兼容模式各有什么区别? （1）、声明位于位于HTML文档中的第一行，处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。 （2）、标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。在兼容模式中，页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。 2
Redux学习总结二
木槿花开
04-25 215
参考阮一峰Redux教程 上一篇介绍了Redux的基本做法：用户发出Action,Reducer函数算出新的State,View重新渲染。 为实现Reducer的异步操作，就需要使用新的工具：中间件(middleware). 一、中间件 只有发送Action的这个步骤即store.dispatch()方法，可以添加功能。 //添加日志功能 let next = store.dispa...
HTML5--Input类型
木槿花开
12-19 496
HTML5拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证。 注意：新的input类型不被支持时，显示为常规的文本域。 1.Input 类型: color color 类型用在input字段主要用于从拾色器选取颜色，如下所示： 选择你喜欢的颜色: 2.Input 类型: date date 类型允许你从一个日期选择器选择一个日期。 生日: 3.Inpu
JSX语法详解
王浴昊
12-02 8万+
JSX语法详解 本文在官方文档的基础上，进行了扩展扩展补充和一些解读。基本涵盖了JSX语法的细枝末节，JSX语法本身并不复杂，也容易掌握。本文供学习参考使用。 一、基础1、JSX是什么JSX是一种像下面这样的语法：const element = <h1>Hello, world!</h1>;它是一种JavaScript语法扩展，在React中可以方便地用来描述UI。本质上，JSX为我们提
Node.js 事件循环
木槿花开
03-29 339
Node.js应用由以下几部分组成： 1.引入 required 模块：可以使用 require 指令来载入 Node.js 模块。 2.创建服务器：服务器可以监听客户端的请求，类似于 Apache 、Nginx 等 HTTP 服务器。 3.接收请求与响应请求：客户端可以使用浏览器或终端发送 HTTP 请求，服务器接收请求后返回响应数据。 Node.js 是单进程单线程应用程序，但是通
JS-FaceDetection:Javascript人脸检测应用程序
05-24
3. **Dlib.js**: 通过WebAssembly将C++的Dlib库引入到JavaScript中，提供高级的计算机视觉功能，包括人脸检测和人脸识别。 4. **HTML5 Canvas**: 用于在网页上进行图像处理的基础元素，可以用来显示和操作从用户...
CodeSharper-Client:CodeSharper 的客户端应用程序
06-04
CodeSharper-客户端应用程序是一款专为开发人员设计的工具，它主要应用于JavaScript编程语言环境中。这款应用旨在提升开发者的工作效率，通过提供代码分析、格式化、重构等高级功能，帮助程序员更好地管理和优化他们...
js-utils:javascript 实用程序
07-09
**JavaScript实用程序库——js-utils** `js-utils`是一个针对JavaScript开发者的实用工具库，它包含了一系列方便开发者在日常编程中频繁使用的功能模块。这个库旨在简化常见的编程任务，提高开发效率，确保代码的...
RSpringAtom-Client:RSpringAtom的客户端
05-18
RSpringAtom客户端是专为开发者设计的一款集成开发环境（IDE）扩展，它以其强大的功能和便捷的使用体验，深受JavaScript开发者喜爱。作为RSpringAtom项目的组成部分，这个客户端旨在提供一个高效、易用的平台，以...
JavaScript设计模式
木槿花开
10-07 356
一、单体模式 概念：单体模式是一个用来划分命名空间并将一批相关的属性和方法组织在一起的对象，如果他可以被实例化，那么他只能被实例化一次。 优点： 1. 可以来划分命名空间，从而清除全局变量所带来的危险。 2. 利用分支技术来来封装浏览器之间的差异。 3. 可以把代码组织的更为一体，便于阅读和维护。 实例： var singleton = function( fn ){ var
word2vec词向量训练及gensim的使用
热门推荐
木槿花开
12-02 8万+
一、什么是词向量 词向量最初是用one-hot represention表征的，也就是向量中每一个元素都关联着词库中的一个单词，指定词的向量表示为：其在向量中对应的元素设置为1，其他的元素设置为0。采用这种表示无法对词向量做比较，后来就出现了分布式表征。 在word2vec中就是采用分布式表征，在向量维数比较大的情况下，每一个词都可以用元素的分布式权重来表示，因此，向量的每一维都表示一个特征向
OPEN PLATFORM FOR PLAYSTATION3
weixin_30564901的博客
11-12 63
致此PS3发售之际，摘抄一段SCE的计划声明。http://www.playstation.com/ps3-openplatform/index.htmlPLAYSTATION®3 allows any desired third-party system software to be installed on it besides its system software provided by ...
JavaScript 客户端检测技术学习分享
weixin_34233679的博客
03-14 75
最近学习了 JavaScript 客户端检测 的知识点，写这篇文章是为了方便自己以后有需要时查阅，同时也把自己的学习成果分享给大家。 客户端检测方案分三种，分别是： 能力检测 怪癖检测 用户代理检测 能力检测是指在编写代码之前先检测特定浏览器的能力。比如，脚本在调用某个函数之前，可能要先检测该函数是否存在。 怪癖检测实际上是浏览器实现中存在的 bu...
第九章：客户端检测（能力检测、怪癖检测）
miaoch的博客
04-11 624
客户端检测 能力检测 更可靠的能力检测 能力检测不是浏览器检测 怪癖检测客户端检测 因为浏览器之间存在差异，哪怕是跨平台的同种浏览器，也有一些差异，这些给开发带来了困难。因此客户端检测是一种补救措施，这种措施不到万不得已不要轻易使用，尽量使用更通用的方法。 能力检测 能力检测的目的不是检测浏览器类型，而是检测浏览器是否有该功能。举例来说IE5.0之前的版本不支持document.getElement
layui.js源码分析
weixin_30597269的博客
04-05 375
/*! @Title: Layui @Description：经典模块化前端框架 @Site: www.layui.com @Author: 贤心 @License：MIT */ ;!function(win) { "use strict"; var Lay = function() { this.v = '1...
javascript高级程序设计第三版 第9章 客户端检测
zhanghj819的博客
08-15 337
9.1 能力检测能力检测（又称特性检测）的目标不是识别特定的浏览器，而是识别浏览器的能力。function getElement(id){ if(document.getElementById){ return document.getElementById(id); }else if(document.all){ return document.al
JavaScript高级程序设计之客户端检测之能力检测第9.1讲笔记
Jane617_min的专栏
10-13 587
浏览器提供商虽然在实现公共接口方面投入了很多精力，但结果仍然是每一种浏览器都有各自 的长处，也都有各自的缺点。即使是那些跨平台的浏览器，虽然从技术上看版本相同，也照 样存在不一致性问题。面对普遍存在的不一致性问题，开发人员要么采取迁就各方的“最小公分母”策 略，要么（也是更常见的）就得利用各种客户端检测方法，来突破或者规避种种局限性。 迄今为止，客户端检测仍然是 Web 开发领域中一个饱受
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值