《JavaScript 高级程序设计》第十三章 客户端检测 学习记录

韩业峰
175 阅读4分钟

1、能力检测

  • 又称特性检测，测试浏览器是否支持某种特性，不要求事先知道浏览器信息，只检测自己关系的能力是否存在。

    if(object.propertyInQuestion){
  // use it
}

  • 降级方案，不支持的时候使用低级的方法

    function getElement(id) {
  if(document.getElementById) {
    return document.getElementById(id)
  }else if(document.all) {
    // IE5 之前
    return document.all[id]
  }else {
    throw new Error('xxxx')
  }
}

  • 首先检测最常用方式，可以优化代码执行。

  • 必须检测切实需要的特性。某能力存在不代表其他能力也存在

    • 如不能通过检测document.all存在就认为是IE。

1、安全能力检测

  • 检测能力是否存在的同时，验证其是否能够展现出预期的行为。

    // 错误，sort属性也会fanhuitrue
function isSortable(object) {
  return !!object.sort
}

// 最好使用typeof
function isSortable(object) {
  return typeof object.sort === 'function'
}

  • typeof 在IE8及以下检测document.createElement返回的是object，而非function

2、基于能力检测进行浏览器分析

1、检测特性

  • 集中检测所有能力，而不是等到使用时再重复检测

2、检测浏览器

  • 根据某些特性，确定使用的是什么浏览器

3、能力检测的局限

  • 通过检测一种或一组能力不能总是确定使用的是哪种浏览器。

2、用户代理检测

  • 用户代理检测通过浏览器的用户代理字符串确定使用的什么浏览器。包含在每个HTTP请求的头部，可以通过naviagtor.userAgent获取。

1、用户代理历史

  • HTTP规范要求浏览器向服务器传入包含浏览器名称和版本信息的简短字符串。标记/版本 的形式

1、早期浏览器

  • 美国国家超级计算应用中心Mosaic/0.9
  • 网景公司
    • Mozilla/Version [Language] (Platform; Encryption)
      • Language 语言
      • Platform 操作系统/平台
      • Encryption 包含的安全加密类型（U、I、N）
      • Mozilla/2.02 [fr] (WinNT; 1)

2、Netscape Navigator 3 和 IE3

  • 删除了语言信息，将操作系统或系统CPU信息等列为可选信息

  • 此时IE伪装成了市场占用率高的Mozilla，真正的信息在字符串中间

3、Netscape Communicator 4 和 IE4～8

  • 格式基本不变，IE8兼容模式标识Trident

4、Gecko（Firfox的渲染引擎）

  • Mozilla/MozillaVersion (Platform; Encryption; OS-or-CPU; Language; PrereleaseVersion)Gecko/GeckoVersion ApplicationProduct/ApplicationProductVersion

5、Webkit（Safari的渲染引擎）

  • Mozilla/5.0 (Platform; Encryption; OS-or-CPU; Language) AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) Safari/SafariVersion
    • SafariVersion是构建编号，后面又补充了Version/真正版本号

6、Konqueror

7、Chrome

Mozilla/5.0 (Platform; Encryption; OS-or-CPU; Language) AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) Chrome/ChromeVersion Safari/SafariVersion

8、Opera

9、iOS与Android

  • iOS

    Mozilla/5.0 (Platform; Encryption; OS-or-CPU like Mac OS X; Language) AppleWebKit/AppleWebKitVersion (KHTML, like Gecko) Version/BrowserVersion Mobile/MobileVersion Safari/SafariVersion

  • Android

    Mozilla/5.0 (Linux; U; Android 2.2; en-us; Nexus One Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

2、浏览器分析

  • 有章可循，可利用它们准确识别浏览器

1、伪造用户代理

  • 通过__defineGetter__篡改，吃力不讨好的事。

2、分析浏览器

  • 通过浏览器返回的用户代理判断下列环境信息
    • 浏览器，浏览器版本，浏览器渲染引擎，设备类型，设备生产商，设备型号，操作系统，操作系统版本。
  • 第三方用户代理解析程序
    • Bowser、UAParser.js、Platfrom.js、CURRENT-DEVICE、Google Closuer、Mootools

3、软件与硬件检测

  • navigator上API获取，不一定支持

1、识别浏览器与操作系统

1、navigator.oscpu

2、navigator.vendor

  • 浏览器开发商信息
    • Goolgle Inc.
    • Apple Computer, Inc.

3、navigator.platform

  • 表示浏览器所在的操作系统
    • MacIntel
    • Win32
    • FreeBSD i386
    • WebTV OS

4、screen.colorDepth 和 screen.pixelDepth

  • 显示器每色素颜色位深

5、screen.orientation

  • ScreenOrientation对象，包含angle和type，type枚举值
    • portrait-primary
    • portrait-secondary
    • landscape-primary
    • landscape-secondary

2、浏览器元数据

1、Geolocation API

  • navigator.geolocation暴露的API，可以感知当前设备的地理位置。
    • getCurrentPosition() 获取当前位置
      • timestamp 查询时间 时间戳
      • coords 坐标信息对象
        • latitude、longitude 经纬度
        • accuracy 精度
        • speed 速度
        • heading 朝向

2、Connection State 和 Network Information API

  • 网络连接状态
    • 连接事件 window.online，window.offline
    • 属性 navigator.onLine
  • navigator.connection暴露Network Information API
    • downlink 设备带宽 Mbit/s
    • downlinkMax 最大下行带宽
    • effectiveType 连接速度质量枚举
      • slow-2g、2g、3g、4g
    • rtt 毫秒 网络实际往返时间
    • type
    • saveData 是否节流模式
    • onchange 任何连接变化检测事件

3、Battery Status API

  • navigator.getBattery()
  • 四个只读属性
    • charging 是否接入电源
    • chargingTime 距离充满还有多少秒
    • discharging 距离耗尽还剩多少秒
    • level 电量百分比
  • 四个事件属性，可以通过添加事件监听器或给事件属性赋值监听
    • onchargingchange
    • onchargingtimechange
    • ondischargingtimechange
    • onlevelchange

3、硬件

1、处理器核心数

  • navigator.hardwareConcurrency

2、设备内存大小

  • navigator.deviceMemory

3、触摸屏支持的最大关联触点数量

  • navigator.maxTouchPoints

​

avatar
文章
阅读
粉丝