一、识别呈现引擎
编写的脚本将主要检测五大呈现引擎:IE(Trident)、Gecko、WebKit、KHTML和Opera。
当前主流浏览器使用的呈现引擎
IE: Trident
Firefox: Gecko
Safari, Chrome : WebKit
Opera: Opera
此外:
与KDE Linux集成的Konqueror是一款基于KHTML的浏览器
移动操作系统iOS和Android默认的浏览器都基于WebKit
检测脚本的基本代码结构如下:
var client = function(){
var engine = {
//呈现引擎
ie: 0,
gecko: 0,
webkit: 0,
khtml: 0,
opera: 0,
//具体的版本号
ver: null
};
//在此检测呈现引擎、平台和设备
return{
engine: engine
};
}();
检测顺序
- 识别Opera
if(window.opera){
engine.ver = window.opera.version();
engine.opera = parseFloat(engine.ver);
}
- 识别WebKit
因为WebKit的用户代理字符串中包含"Gecko"和"KHTML",所以在检测"Gecko"和"KHTML"之前要先检测WebKit。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);
}
- 识别KHTML
由于KHTML的用户代理字符串中包含"Gecko",因此在排除KHTML之前,无法准确检测基于Gecko的浏览器。在上面代码的基础上再增加一个检测分支:
else if (/KHTML\/(\S+)/.test(ua) || /Konqueror\/([^;]+)/.test(ua)) {
engine.ver = RegExp["$1"];
engine.khtml = parseFloat(engine.ver);
}
4.识别Gecko
在用户代理字符串中,Gecko的版本号不会出现在字符串“Gecko”的后面,而是会出现在字符串“rv:”的后面。再增加一个检测分支
else if (/rv:([^\)]+)\) Gecko\/\d{8}/.test(ua)) {
engine.ver = RegExp["$1"];
engine.gecko = parseFloat(engine.ver);
}
5.最后识别IE
IE的版本号位于字符串"MSIE"的后面、一个分号的前面。再增加一个检测分支
else if(/MISE ([^;]+)/.test(ua)){
engine.ver = RegExp["$1"];
engine.ie = parseFloat(engine.ver);
}
二、识别浏览器
只有呈现引擎还不能说明存在所需的JS功能。Safari和Chrome都是用WebKit作为呈现引擎,但是他们的JS引擎不一样。需要为client对象添加一个新的属性browser,并作为返回值返回。
var browser = {
//呈现引擎
ie: 0,
firefox: 0,
safari: 0,
konq: 0,
opera: 0,
chrome: 0,
//具体的版本号
ver: null
};
由于大多数浏览器与其呈现引擎密切相关,所以检测浏览器的代码与检测呈现引擎的代码是混合在一起的。
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(/MISE ([^;]+)/.test(ua)){
engine.ver = RegExp["$1"];
engine.ie = parseFloat(engine.ver);
}
三、识别平台
目前的三大主流平台是Windows、Mac和Unix(包括各种Linux)。为了检测这些平台,需要添加对象System,并作为返回值返回。
网友评论