浏览器检测
要点：
- 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重名
用户代理检测
