您的位置：首页 > Web前端 > JavaScript

JavaScript高级程序设计笔记（7）

2015-08-18 13:57 627 查看

第九章 客户端检测

不到万不得已，就不要使用客户端检测。只要能找到更通用的方法，就应该优先采用更通用的方法。

能力检测 if (object.propertyInQuestion){

//使用object.propertyInQuestion

}

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

用户代理字符串应该以一组产品的形式给出，字符串格式为：标识符/产品版本号。但是，现实中的用户代理字符串则绝没有如此简单。

早期的浏览器

Mozilla/2.02 [fr] (WinNT; I)

Netscape Navigator 3 和Internet Explorer 3

Netscape Communicator 4 和IE4～IE8

Gecko Firefox 的呈现引擎

WebKit Safari 的呈现引擎

Konqueror 与KDE Linux 集成的Konqueror，是一款基于KHTML 开源呈现引擎的浏览器。尽管Konqueror 只能在Linux 中使用，但它也有数量可观的用户。

Chrome 以WebKit 作为呈现引擎，但使用了不同的JavaScript 引擎

Opera

用户代理字符串检测技术

识别呈现引擎

五大呈现引擎：IE、Gecko、WebKit、KHTML 和Opera。

第一步就是识别Opera

放在第二位检测的呈现引擎是WebKit。因为WebKit 的用户代理字符串中包含”Gecko”和

“KHTML”这两个子字符串，所以如果首先检测它们，很可能会得出错误的结论。

接下来要测试的呈现引擎是KHTML。同样，KHTML 的用户代理字符串中也包含”Gecko”，因此

在排除KHTML 之前，我们无法准确检测基于Gecko 的浏览器。

在排除了WebKit 和KHTML 之后，就可以准确地检测Gecko 了。

最后一个要检测的呈现引擎就是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);

}


识别浏览器。比如苹果公司的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 浏览器的代码

}


识别平台

识别Windows 操作系统

识别移动设备

识别游戏系统

一般应优先考虑使用能力检测。怪癖检测是确定应该如何处理代码的第二选择。而用户代理检测则是客户端检测的最后一种方案，因为这种方法对用户代理字符串具有很强的依赖性。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航