快捷導(dǎo)航

利用jQuery插件擴(kuò)展識別瀏覽器內(nèi)核與外殼的類型和版本的實(shí)現(xiàn)代碼

更新時(shí)間：2011年10月22日 15:04:43 作者：

在平時(shí)的B/S開發(fā)中，經(jīng)常需要知道瀏覽器的內(nèi)核類型和版本，甚至，有時(shí)還需要知道瀏覽器的外殼類型和版本

尤其是在當(dāng)今各種瀏覽器滿天飛（據(jù)說僅以IE為內(nèi)核的瀏覽器就有200種之多）。
　　小弟今天寫了個(gè)基于jQuery的插件擴(kuò)展，主要用于識別瀏覽器內(nèi)核與外殼的類型和版本?？勺R別各種瀏覽器的內(nèi)核，并已經(jīng)支持多種國內(nèi)主流瀏覽器。
　　費(fèi)話不多說，上我的JavaScript代碼：（文件名：jquery.browsertype-1.0.js）

復(fù)制代碼代碼如下:

 
/** 
* jQuery插件開發(fā)方法二：第一步：插件定義 
*/ 
jQuery.myPlugin = { 
//獲得瀏覽器的內(nèi)核與外殼的類型和版本 
Client: function (){ 
//瀏覽器內(nèi)核類型(只有五種) 
var engine = { ie:0, webkit:0, gecko:0, opera:0, khtml:0 }; 
//瀏覽器外殼類型（國內(nèi)常見的瀏覽器有：360瀏覽器、傲游、騰訊QQ\TT瀏覽器、世界之窗、彗星瀏覽器、綠色瀏覽器、傳統(tǒng)IE、谷歌Chrome、網(wǎng)景netscape、火狐、Opera、蘋果Safari等等） 
var shell = { se360:0, se:0, maxthon:0, qq:0, tt:0, theworld:0, cometbrowser:0, greenbrowser:0, ie:0, chrome:0, netscape:0, firefox:0, opera:0, safari:0, konq:0 }; 
//獲得客戶端瀏覽器的信息 
var ua = navigator.userAgent.toLowerCase(); 
for (var type in engine) { 
if (typeof type === 'string') { 
var regexp = 'gecko' === type ? /rv:([\w.]+)/ : RegExp(type + '[ \\/]([\\w.]+)'); 
if (regexp.test(ua)){ 
engine.version = window.opera ? window.opera.version() : RegExp.$1;//瀏覽器內(nèi)核版本 
engine[type] = parseFloat(engine.version); 
engine.type = type;//瀏覽器內(nèi)核類型 
break; 
} 
} 
} 
for (var type in shell) { 
if (typeof type === 'string') { 
var regexp = null; 
switch(type) { 
case "se360": regexp = /360se(?:[ \/]([\w.]+))?/; break; 
case "se": regexp = /se ([\w.]+)/; break; 
case "qq": regexp = /qqbrowser\/([\w.]+)/; break; 
case "tt": regexp = /tencenttraveler ([\w.]+)/; break; 
case "safari": regexp = /version\/([\w.]+)/; break; 
case "konq": regexp = /konqueror\/([\w.]+)/; break; 
case "netscape": regexp = /navigator\/([\w.]+)/; break; 
default: regexp = RegExp(type + '(?:[ \\/]([\\w.]+))?'); 
} 
if (regexp.test(ua)) { 
shell.version = window.opera ? window.opera.version() : RegExp.$1 ? RegExp.$1 : 'unknown';//瀏覽器外殼版本 
shell[type] = parseFloat(shell.version); 
shell.type = type;//瀏覽器外殼類型 
break; 
} 
} 
} 
//返回瀏覽器內(nèi)核與外殼的類型和版本：engine為內(nèi)核，shell為外殼 
return { engine: engine, shell: shell }; 
} 
}; 
/** 
* jQuery插件開發(fā)方法二：第二步：執(zhí)行插件 
* jQuery.myBrowser插件：獲得瀏覽器的內(nèi)核與外殼的類型和版本 
* 使用示例： 
* (1)瀏覽器內(nèi)核：alert("您的瀏覽器信息如下：\n內(nèi)核類型："+jQuery.myBrowser.engine.type+"，內(nèi)核版本："+jQuery.myBrowser.engine.version); 
* (2)瀏覽器外殼：alert("您的瀏覽器信息如下：\n外殼類型："+jQuery.myBrowser.shell.type+"，外殼版本："+jQuery.myBrowser.shell.version); 
*/ 
jQuery.myBrowser = jQuery.myPlugin.Client(); 

使用示例：（test.html）

復(fù)制代碼代碼如下:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
<title>獲得瀏覽器的信息</title> 
<script type="text/javascript" src="https://www.google.com/jsapi"></script> 
<script type="text/javascript"> 
google.load("jquery", "1.4.2"); 
google.load("jqueryui", "1.7.2"); 
</script> 
<script type="text/javascript" src="jquery.browsertype-1.0.js"></script> 
<script type="text/javascript"> 
alert("您的瀏覽器信息如下：\n內(nèi)核類型："+jQuery.myBrowser.engine.type+"，內(nèi)核版本："+jQuery.myBrowser.engine.version); 
alert("您的瀏覽器信息如下：\n外殼類型："+jQuery.myBrowser.shell.type+"，外殼版本："+jQuery.myBrowser.shell.version); 
document.writeln("您的瀏覽器內(nèi)核類型 ——>"+jQuery.myBrowser.engine.type+"："+jQuery.myBrowser.engine.version+"<br>"); 
document.writeln("您的瀏覽器外殼類型 ——>"+jQuery.myBrowser.shell.type+"："+jQuery.myBrowser.shell.version+"<br>"); 
</script> 
</head> 
<body> 
<br/>測試瀏覽器的內(nèi)核與外殼的類型和版本：<br/> 
</body> 
</html> 