JavaScript高级程序设计笔记（7）-优快云博客

本文链接：https://blog.youkuaiyun.com/koalacoco/article/details/47750971

本文介绍了客户端检测技术，包括能力检测、怪癖检测和用户代理字符串检测等方法，并提供了具体实现代码示例。文章强调应优先考虑能力检测，其次考虑怪癖检测，最后才使用用户代理检测。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第九章客户端检测

不到万不得已，就不要使用客户端检测。只要能找到更通用的方法，就应该优先采用更通用的方法。
能力检测 if (object.propertyInQuestion){
//使用object.propertyInQuestion
}
怪癖检测（quirks detection）的目标是识别浏览器的特殊行为。但与能力检测确认浏览器支持什么能力不同，怪癖检测是想要知道浏览器存在什么缺陷
用户代理字符串应该以一组产品的形式给出，字符串格式为：标识符/产品版本号。但是，现实中的用户代理字符串则绝没有如此简单。
1. 早期的浏览器
  Mozilla/2.02 [fr] (WinNT; I)
2. Netscape Navigator 3 和Internet Explorer 3
3. Netscape Communicator 4 和IE4～IE8
4. Gecko Firefox 的呈现引擎
5. WebKit Safari 的呈现引擎
6. Konqueror 与KDE Linux 集成的Konqueror，是一款基于KHTML 开源呈现引擎的浏览器。尽管Konqueror 只能在Linux 中使用，但它也有数量可观的用户。
7. Chrome 以WebKit 作为呈现引擎，但使用了不同的JavaScript 引擎
8. Opera
用户代理字符串检测技术
1. 识别呈现引擎
  五大呈现引擎：IE、Gecko、WebKit、KHTML 和Opera。
  1. 第一步就是识别Opera
  2. 放在第二位检测的呈现引擎是WebKit。因为WebKit 的用户代理字符串中包含”Gecko”和
    “KHTML”这两个子字符串，所以如果首先检测它们，很可能会得出错误的结论。
  3. 接下来要测试的呈现引擎是KHTML。同样，KHTML 的用户代理字符串中也包含”Gecko”，因此
    在排除KHTML 之前，我们无法准确检测基于Gecko 的浏览器。
  4. 在排除了WebKit 和KHTML 之后，就可以准确地检测Gecko 了。
  5. 最后一个要检测的呈现引擎就是IE 了。IE 的版本号位于字符串”MSIE”的后面、一个分号的前面，
    因此相应的正则表达式非常简单。
    var client = function(){ var engine = { //呈现引擎 ie: 0, gecko: 0, webkit: 0, khtml: 0, opera: 0, //具体的版本号 ver: null }; //在此检测呈现引擎、平台和设备 return { engine : engine }; }();
    
    var ua = navigator.userAgent; if (window.opera){ engine.ver = window.opera.version(); engine.opera = parseFloat(engine.ver); } else if (/AppleWebKit\/(\S+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.webkit = parseFloat(engine.ver); } else if (/KHTML\/(\S+)/.test(ua)) { engine.ver = RegExp["$1"]; engine.khtml = parseFloat(engine.ver); } else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)){ engine.ver = RegExp["$1"]; engine.gecko = parseFloat(engine.ver); } else if (/MSIE ([^;]+)/.test(ua)){ engine.ver = RegExp["$1"]; engine.ie = parseFloat(engine.ver); }
2. 识别浏览器。比如苹果公司的Safari 浏览器和谷歌公司的Chrome 浏览器都使用WebKit 作为呈现引擎，但它们的JavaScript 引擎却不一样。在这两款浏览器中，client.webkit都会返回非0 值
```
<!DOCTYPE html>
<html>
<head>

<script type="text/javascript">
client = function(){ 
 engine = { 
//呈现引擎 
ie: 0, 
gecko: 0, 
webkit: 0, 
khtml: 0, 
opera: 0, 
//具体的版本号 
ver: null 
}; 
 browser = {
//浏览器
ie: 0,
firefox: 0,
safari: 0,
konq: 0,
opera: 0,
chrome: 0,
//具体的版本
ver: null
};
//在此检测呈现引擎、平台和设备
return {
engine: engine,
browser: browser
};
}();

var ua = navigator.userAgent;
if (window.opera){
engine.ver = browser.ver = window.opera.version();
engine.opera = browser.opera = parseFloat(engine.ver);
} 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 {
safariVersion = 2;
}
browser.safari = browser.ver = safariVersion;
}
} else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)){
engine.ver = browser.ver = RegExp["$1"];
engine.khtml = browser.konq = parseFloat(engine.ver);
} 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);
}
} else if (/MSIE ([^;]+)/.test(ua)){
engine.ver = browser.ver = RegExp["$1"];
engine.ie = browser.ie = parseFloat(engine.ver);
}
</script>
</head>
<body>
</body>
</html>
```
  有了上面这些代码之后，我们就可以编写下面的逻辑。
  if (client.engine.webkit) { //if it’s WebKit if (client.browser.chrome){ //执行针对Chrome 的代码 } else if (client.browser.safari){ //执行针对Safari 的代码 } } else if (client.engine.gecko){ if (client.browser.firefox){ //执行针对Firefox 的代码 } else { //执行针对其他Gecko 浏览器的代码 }
3. 识别平台
4. 识别Windows 操作系统
5. 识别移动设备
6. 识别游戏系统
一般应优先考虑使用能力检测。怪癖检测是确定应该如何处理代码的第二选择。而用户代理检测则是客户端检测的最后一种方案，因为这种方法对用户代理字符串具有很强的依赖性。