jquery判断浏览器类型的代码


Posted in Javascript onNovember 05, 2012

Jquery中利用navigator.userAgent.indexOf来判断浏览器类型,并进行了一下处理,建议学习Jquery的朋友学习下,了解一下思路。

主要使用的方法:$.browser.['浏览器关键字']

$(function() { 
if($.browser.msie) { 
alert("this is msie"); 
} else if($.browser.safari) { 
alert("this is safari!"); 
} else if($.browser.mozilla) { 
alert("this is mozilla!"); 
} else if($.browser.opera) { 
alert("this is opera"); 
} else { 
alert("i don't konw!"); 
}

我们看下jQuery的源码:
var userAgent = navigator.userAgent.toLowerCase(); 
// Figure out what browser is being used 
jQuery.browser = { 
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1], 
safari: /webkit/.test( userAgent ), 
opera: /opera/.test( userAgent ), 
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ), 
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ) 
};

Jquery 使用的是通过正则来匹配userAgent判断浏览器的种类和版本.
version---浏览器版本
msie----ie浏览器(Microsoft Internet Explorer)
mozilla-火狐浏览器
opera--opera浏览器

如果我们要来判断当前浏览器是否是IE6应该如何来判断?

if($.browser.msie&&($.browser.version == "6.0")&&!$.support.style){ 
alert("ie6"); 
}

同样Jquery判断浏览器是否为IE7
if($.browser.msie&&($.browser.version == "7.0")){ 
alert("ie7"); 
}

如果不想使用Jquery,稍为修改下代码就可以为自己所用Js代码:
var userAgent = navigator.userAgent.toLowerCase(); 
browser={ 
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [0,'0'])[1], 
safari: /webkit/.test( userAgent ), 
opera: /opera/.test( userAgent ), 
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ), 
mozilla: /mozilla/.test( userAgent ) && !/(compatible|webkit)/.test( userAgent ) 
}

调用的时候和jquery一样,只不过把$符号取掉就行了

如果是为了判断IE的版本我还是推荐用IE的条件表达式来书写JS

<!--[if IE]> 
<script type="text/javascript"> 
alert("ie"); 
</script> 
<![endif]--> 
<!--[if IE 6]> 
<script type="text/javascript"> 
alert("ie6"); 
</script> 
<![endif]--> 
<!--[if IE 7]> 
<script type="text/javascript"> 
alert("ie7"); 
</script> 
<![endif]-->

这个比我们手动通过$.browser来判断IE版本更精准,也不用去记jquery的browser的使用方法了
Javascript 相关文章推荐
Prototype使用指南之selector.js说明
Oct 26 Javascript
关于jquery.validate1.9.0前台验证的使用介绍
Apr 26 Javascript
js定时器(执行一次、重复执行)
Mar 07 Javascript
jquery右下角自动弹出可关闭的广告层
May 08 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
JS禁用页面上所有控件的实现方法(附demo源码下载)
Dec 17 Javascript
Vue.js实现无限加载与分页功能开发
Nov 03 Javascript
jQuery zTree树插件简单使用教程
Jan 10 Javascript
JavaScript定时器setTimeout()和setInterval()详解
Aug 18 Javascript
JS实现的简单标签点击切换功能示例
Sep 21 Javascript
微信小程序位置授权处理方法
Jun 13 Javascript
微信小程序实现选项卡滑动切换
Oct 22 Javascript
js实现翻页后保持checkbox选中状态的实现方法
Nov 03 #Javascript
JS事件Event元素(兼容IE,Firefox,Chorme)
Nov 01 #Javascript
js限制textarea每行输入字符串长度的代码
Oct 31 #Javascript
JS TextArea字符串长度限制代码集合
Oct 31 #Javascript
JS 控件事件小结
Oct 31 #Javascript
jQuery事件 delegate()使用方法介绍
Oct 30 #Javascript
fancybox modal的完美解决(右上的X)
Oct 30 #Javascript
You might like
杏林同学录(三)
2006/10/09 PHP
mcrypt启用 加密以及解密过程详细解析
2013/08/07 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
JavaScript之appendChild、insertBefore和insertAfter使用说明
2010/12/30 Javascript
javascript原生和jquery库实现iframe自适应高度和宽度
2014/07/18 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
2015/10/27 Javascript
详解javascript高级定时器
2015/12/31 Javascript
JavaScript_ECMA5数组新特性详解
2016/06/12 Javascript
JavaScript判断浏览器对CSS3属性是否支持的多种方法
2016/11/13 Javascript
nodejs处理图片的中间件node-images详解
2017/05/08 NodeJs
JS与CSS3实现图片响应鼠标移动放大效果示例
2018/05/04 Javascript
使用vue-router切换页面时,获取上一页url以及当前页面url的方法
2019/05/06 Javascript
vue动态绘制四分之三圆环图效果
2019/09/03 Javascript
vue 关闭浏览器窗口的时候,清空localStorage的数据示例
2019/11/06 Javascript
Vue v-for循环之@click点击事件获取元素示例
2019/11/09 Javascript
[01:07]DOTA2次级职业联赛 - Fpb战队宣传片
2014/12/01 DOTA
python之文件的读写和文件目录以及文件夹的操作实现代码
2016/08/28 Python
Python实现的摇骰子猜大小功能小游戏示例
2017/12/18 Python
PyQt5每天必学之像素图控件QPixmap
2018/04/19 Python
python pandas库中DataFrame对行和列的操作实例讲解
2018/06/09 Python
python简单操作excle的方法
2018/09/12 Python
python+tkinter实现学生管理系统
2019/08/20 Python
python socket通信编程实现文件上传代码实例
2019/12/14 Python
将tensorflow模型打包成PB文件及PB文件读取方式
2020/01/23 Python
如何在pycharm中安装第三方包
2020/10/27 Python
法国面料和小百货在线商店:Mondial Tissus
2019/03/23 全球购物
英国户外服装品牌:Craghoppers
2019/04/25 全球购物
PHP引擎php.ini参数优化深入讲解
2021/03/24 PHP
实用求职信范文分享
2013/12/25 职场文书
十岁生日同学答谢词
2014/01/19 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
劳动者解除劳动合同通知书
2015/04/16 职场文书
2015年保管员工作总结
2015/04/30 职场文书
信息技术国培研修日志
2015/11/13 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
postman中form-data、x-www-form-urlencoded、raw、binary的区别介绍
2022/01/18 HTML / CSS