利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码


Posted in Javascript onOctober 22, 2011

尤其是在当今各种浏览器满天飞(据说仅以IE为内核的浏览器就有200种之多)。

小弟今天写了个基于jQuery的插件扩展,主要用于识别浏览器内核与外壳的类型和版本。可识别各种浏览器的内核,并已经支持多种国内主流浏览器。

费话不多说,上我的JavaScript代码:(文件名:jquery.browsertype-1.0.js)

/** 
* jQuery插件开发方法二:第一步:插件定义 
*/ 
jQuery.myPlugin = { 
//获得浏览器的内核与外壳的类型和版本 
Client: function (){ 
//浏览器内核类型(只有五种) 
var engine = { ie:0, webkit:0, gecko:0, opera:0, khtml:0 }; 
//浏览器外壳类型(国内常见的浏览器有:360浏览器、傲游、腾讯QQ\TT浏览器、世界之窗、彗星浏览器、绿色浏览器、传统IE、谷歌Chrome、网景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;//浏览器内核版本 
engine[type] = parseFloat(engine.version); 
engine.type = type;//浏览器内核类型 
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; 
} 
} 
} 
//返回浏览器内核与外壳的类型和版本:engine为内核,shell为外壳 
return { engine: engine, shell: shell }; 
} 
}; 
/** 
* jQuery插件开发方法二:第二步:执行插件 
* jQuery.myBrowser插件:获得浏览器的内核与外壳的类型和版本 
* 使用示例: 
* (1)浏览器内核:alert("您的浏览器信息如下:\n内核类型:"+jQuery.myBrowser.engine.type+",内核版本:"+jQuery.myBrowser.engine.version); 
* (2)浏览器外壳:alert("您的浏览器信息如下:\n外壳类型:"+jQuery.myBrowser.shell.type+",外壳版本:"+jQuery.myBrowser.shell.version); 
*/ 
jQuery.myBrowser = jQuery.myPlugin.Client();

使用示例:(test.html)
<!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内核类型:"+jQuery.myBrowser.engine.type+",内核版本:"+jQuery.myBrowser.engine.version); 
alert("您的浏览器信息如下:\n外壳类型:"+jQuery.myBrowser.shell.type+",外壳版本:"+jQuery.myBrowser.shell.version); 
document.writeln("您的浏览器内核类型 ——>"+jQuery.myBrowser.engine.type+":"+jQuery.myBrowser.engine.version+"<br>"); 
document.writeln("您的浏览器外壳类型 ——>"+jQuery.myBrowser.shell.type+":"+jQuery.myBrowser.shell.version+"<br>"); 
</script> 
</head> 
<body> 
<br/>测试浏览器的内核与外壳的类型和版本:<br/> 
</body> 
</html>
Javascript 相关文章推荐
一个很简单的jquery+xml+ajax的无刷新树结构(无css,后台是c#)
Jun 02 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
Oct 08 Javascript
jquery实现在网页指定区域显示自定义右键菜单效果
Aug 25 Javascript
浅谈Sublime Text 3运行JavaScript控制台
Jun 06 Javascript
JavaScript队列、优先队列与循环队列
Nov 14 Javascript
利用Node.js对文件进行重命名
Mar 12 Javascript
easyui-datagrid开发实践(总结)
Aug 02 Javascript
vue项目中导入swiper插件的方法
Jan 30 Javascript
jquery实现的简单轮播图功能【适合新手】
Aug 17 jQuery
详解JWT token心得与使用实例
Aug 02 Javascript
微信小程序3D轮播实现代码
Sep 19 Javascript
js前端如何写一个精确的倒计时代码
Oct 25 Javascript
js两行代码按指定格式输出日期时间
Oct 21 #Javascript
jQuery中live方法的重复绑定说明
Oct 21 #Javascript
jquery(live)中File input的change方法只起一次作用的解决办法
Oct 21 #Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 #Javascript
jQuery EasyUI API 中文文档 - Spinner微调器使用
Oct 21 #Javascript
JavaScript闭包 懂不懂由你反正我是懂了
Oct 21 #Javascript
深入理解JavaScript作用域和作用域链
Oct 21 #Javascript
You might like
PHP的变量总结 新手推荐
2011/04/18 PHP
解析PHP中如何将数组变量写入文件
2013/06/06 PHP
php跨站攻击实例分析
2014/10/28 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
Laravel 5.0 发布 新版本特性详解
2015/02/10 PHP
PHP HTTP 认证实例详解
2016/11/03 PHP
Yii框架ACF(accessController)简单权限控制操作示例
2019/04/26 PHP
html下载本地
2006/06/19 Javascript
第二篇Bootstrap起步
2016/06/21 Javascript
jQuery flip插件实现的翻牌效果示例【附demo源码下载】
2016/09/20 Javascript
js数组操作方法总结(必看篇)
2016/11/22 Javascript
基于JavaScript中标识符的命名规则介绍
2018/01/06 Javascript
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[02:29]完美世界高校联赛上海赛区回顾
2015/12/15 DOTA
Python挑选文件夹里宽大于300图片的方法
2015/03/05 Python
python字符串str和字节数组相互转化方法
2017/03/18 Python
解决python3运行selenium下HTMLTestRunner报错的问题
2018/12/27 Python
Python + Requests + Unittest接口自动化测试实例分析
2019/12/12 Python
pyinstaller打包单文件时--uac-admin选项不起作用怎么办
2020/04/15 Python
Python3+PyCharm+Django+Django REST framework配置与简单开发教程
2021/02/16 Python
Html5 实现微信分享及自定义内容的流程
2019/08/20 HTML / CSS
HTML5本地存储localStorage、sessionStorage基本用法、遍历操作、异常处理等
2014/05/08 HTML / CSS
美国气象仪器、花园装饰和墙壁艺术商店:Wind & Weather
2019/05/29 全球购物
介绍java中初始化块的使用
2012/09/11 面试题
什么是Connection-oriented Protocol/Connectionless Protocol面向连接的协议/无连接协议
2012/09/06 面试题
本科生学习总结的自我评价
2013/10/02 职场文书
英语文学专业学生的自我评价
2013/10/31 职场文书
少儿节目主持串词
2014/04/02 职场文书
学历公证书范本
2014/04/09 职场文书
学习实践科学发展观心得体会
2014/09/10 职场文书
感谢信模板大全
2015/01/23 职场文书
高校自主招生自荐信2015
2015/03/04 职场文书
基石观后感
2015/06/12 职场文书
网络新闻该怎么写?这些写作技巧你都知道吗?
2019/08/26 职场文书
Android存储中最基本的文件存储方式
2022/04/30 Java/Android
MySQL sql模式设置引起的问题
2022/05/15 MySQL