第十六章 浏览器检测

浏览器检测

要点：

• 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<data.length;i++)    {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {     string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {        // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Internet Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {         // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();

//使用方法：
BrowserDetect.browser;// 浏览器的名称，例如Firefox，IE
BrowserDetect.version;//浏览器的版本，比如，7、11
BrowserDetect.OS;//浏览器所宿主的操作系统，比如Windows、Linux

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 + '<br>');
    document.write('文件名' + navigator.plugins[i].filename + '<br>');
};
// 插件名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重名

• 用户代理检测