第十六章 浏览器检测

浏览器检测

要点：

• navigator对象
• 客户端检测

Navigator

Navigator 属性

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值

Navigator 对象方法

方法	描述
javaEnabled()	指定是否在浏览器中启用Java
taintEnabled()	规定浏览器是否启用数据污点(data tainting)

/**
 * navigator对象是window对象下的
*/

// console.log(window.navigator);
// Navigator {vendorSub: "", productSub: "20030107", vendor: "Google Inc.", maxTouchPoints: 0, hardwareConcurrency: 4, …}

// console.log(navigator.appName);
// chrome,safari下显示 Netscape  返回浏览器的名称 这个属性不能精确取到浏览器名称

console.log(navigator.appVersion);
// 5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36

console.log(navigator.userAgent);
// 用户代理字符串
// Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36

console.log(navigator.platform);
// 浏览器所在系统
// MacIntel

浏览器嗅探器

就是一段js程序，比如browserdetect.js文件。

var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i

navigator检测浏览器插件：

属性	含义
name	插件名
filename	文件名
description	描述

console.log(navigator.plugins);
// 插件检测
// PluginArray {0: Plugin, 1: Plugin, 2: Plugin, Chrome PDF Plugin: Plugin, Chrome PDF Viewer: Plugin, Native Client: Plugin, length: 3}

for (let i = 0; i < navigator.plugins.length; i++) {
    document.write('插件名' + navigator.plugins[i].name + '
');
    document.write('文件名' + navigator.plugins[i].filename + '
');
};
// 插件名Chrome PDF Plugin
// 文件名internal-pdf-viewer
// 插件名Chrome PDF Viewer
// 文件名mhjfbmdgcfjbbpaeojofohoefgiehjai
// 插件名Native Client
// 文件名internal-nacl-plugin

可以用此种方法检测是否有falsh插件。

客户端检测

客户端检测一共分为三种，分别为：能力检测、怪癖检测和用户代理检测。通过这三种检测方案，我们可以充分的了解当前浏览器所处系统、所支持的语法、所具有的特殊性能。

• 能力检测

  能力检测又称作特性检测，检测的目标不是特定的浏览器，而是识别浏览器的能力。能力检测不必估计特定的浏览器，只需要确定当前浏览器是否支持特定的能力，就可以得出可行的结局方案；

  const width = window.innerWidth;
  
  // ie兼容
  if (typeof width != 'number') {
      // 标准模式
      if (document.compatMode == 'CSSCompat') {
          width = document.documentElement.clientWidth;
      }
      // 非标准模式
      else {
          width = document.body.clientWidth;
      }
  }
  

• 怪癖检测bug（缺陷）

  与能力检测类似，怪癖检测的目标是识别浏览器特殊行为。但与能力检测确认浏览器支持什么能力不同。怪癖检测是想要知道浏览器有什么缺陷。

  bug一般属于个别浏览器独有。在大多数新版本浏览器被修复。

  例如 ie低级浏览器，toString重名

• 用户代理检测