第九章客户端检测
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了第九章客户端检测相关的知识，希望对你有一定的参考价值。
客户端检测
9.1能力检测
只要确定浏览器支持特定的能力，就能给出解决方案
if(object.propertyInQuestion){
}
两个概念：先检测达成目的的最常用的特性；检测实际要用到的特性
9.1.1更可靠的能力检测
尽可能使用typeof进行能力检测
在浏览器环境测试任何对象的某个特性是否存在使用如下函数：
function isHostMethod(object, property) {
var t = typeof object[property];
return t == ‘function‘ ||
(!!(t == ‘object‘ && object[property])) ||
t == ‘unknown‘;
}
result = isHostMethod(xhr, "open"); //true
result = isHostMethod(xhr, "foo"); //false
9.1.2能力检测不是浏览器检测
最好是一次性检测所有相关特性，而不是分别检测
//确定浏览器是否支持 Netscape 风格的插件
var hasNSPlugins = !!(navigator.plugins && navigator.plugins.length );
//确定浏览器是否具有 DOM1 级规定的能力
var hasDOM1 = !!(document.getElementById && document.createElement
&& document.getElementByTagName);
9.2怪癖检测
识别浏览器的特殊行为，知道浏览器存在的缺陷
9.3用户代理检测
通过检测用户代理字符串（可通过javascript的navigator.userAgent 属性访问）来确定实际使用的浏览器；在服务器端，是一种常用而且广为接受的做法。在客户端，优先级排在能力检测和怪癖检测之后。
9.3.1用户代理字符串的历史
浏览器应该发送简短的用户代理字符串，指明浏览器的名称和版本号，字符串格式：标识符/产品版本号
9.3.2用户代理字符串检测技术
1.识别呈现引擎
脚本主要检测五大呈现引擎： IE、Gecko、WebKit、Khtml 和 Opera。
使用模块增强模式来封装检测脚本
var client = function(){
//呈现引擎
var engine = {
ie : 0,
gecko : 0,
webkit : 0,
khtml : 0,
opera : 0,
//具体的版本号
ver : null
};
//再次检测呈现引擎、平台和设备
return {
engine : engine
};
}();
如果检测到那个呈现引擎，就以浮点数值形式将该引擎的版本号写入相应的属性。而呈现引擎的完整版本是一个字符串，则被写入ver属性。
if(client.engine.ie){ //如果是IE ，engine.ie的值应大于0
//针对IE
} else if (client.engine.gecko > 1.5) {
if(client.engine.ver == "1.8.1"){
//to-do
}
}
正确的识别呈现引擎关键是检测顺序要正确（以下为检测顺序）
1. Opera
//Opera 5起支持window.opera对象
if ( window.opera ){
engine.ver = window.opera.version(); //Opera 7.6起返回浏览器版本字符串
engine.opera = parseFloat( engine.ver );
}
2. WebKit
//AppleWebKit独一无二
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);
}
3. KHTML
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) || /Konqueror\/([^;]+)/.test(ua)){
engine.ver = RegExp["$1"];
engine.khtml = parseFloat(engine.ver);
}
4. Gecko
Gecko的版本号位于字符串“rv:”与一个闭括号之间，还要查找“Gecko/”后的8个数字
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) || /Konqueror\/([^;]+)/.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);
}
5.IE
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) || /Konqueror\/([^;]+)/.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 = browser.ver = RegExp["$1"];
engine.ie = browser.ie = parseFloat(engine.ver);
}
2.识别浏览器
相同内核的浏览器的JavaScript有可能引擎不一样
var client = function(){
//呈现引擎
var engine = {
ie : 0,
gecko : 0,
webkit : 0,
khtml : 0,
opera : 0,
//具体的版本号
ver : null
};
var browser = {
//浏览器
ie : 0,
firefox : 0,
konq : 0,
opera : 0,
chrome : 0,
safari : 0,
//具体的版本
ver : null
};
//再次检测呈现引擎、平台和设备
return {
engine : engine,
browser : browser
};
}();
大多数浏览器与其呈现引擎密切相关，所以下面示例中检测浏览器的代码与呈现引擎的代码是混合在一起的
//检测呈现引擎及浏览器
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);
//确定是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"];
borwser.safari = parseFloat(browser.ver);
} else {
//近似的确定版本号
var safariVersion = 1;
if (engine.webkit < 100 ){
safariVersion = 1;
} else if (engine.webkit < 312){
safariVersoin = 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 = RegExp["$1"];
engine.khtml = 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);
}
if(client.engine.webkit){
if (client.browser.chrome) {
}else if (client.browser.safari){
}
} else if (client.engine.gecko) {
if (client.browser.firefox) {
}else{
}
}
3.识别平台在各种平台版本的浏览器，在不同的平台下可能会有不同的问题
var client = function(){
//呈现引擎
var engine = {
ie : 0,
gecko : 0,
webkit : 0,
khtml : 0,
opera : 0,
//具体的版本号
ver : null
};
var browser = {
//浏览器
ie : 0,
firefox : 0,
konq : 0,
opera : 0,
chrome : 0,
safari : 0,
//具体的版本
ver : null
};
var system = {
win : false,
mac : false,
xll : false
};
//再次检测呈现引擎、平台和设备
return {
engine : engine,
browser : browser,
system : system
};
}();
//navigator.platform值Win32 、Win64、MacPPC、MacIntel、X11、Linux i686
var p = navigator.platform;
system.win = p.indexOf("Win") == 0;
systemp.mac = p.indexOf("Mac") == 0;
system.xll = (p.indexOf("Xll")) == 1 || (p.indexOf("Linux") == 0);
后见9.3.9完整代码
以上是关于第九章客户端检测的主要内容，如果未能解决你的问题，请参考以下文章