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 相关文章推荐
javascript模拟的Ping效果代码 (Web Ping)
Mar 13 Javascript
Extjs优化(二)Form表单提交通用实现
Apr 15 Javascript
JavaScript var声明变量背后的原理示例解析
Oct 12 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
jQuery控制的不同方向的滑动(向左、向右滑动等)
Jul 18 Javascript
Jquery全屏相册插件zoomvisualizer具有调节放大与缩小功能
Nov 02 Javascript
javascript鼠标右键菜单自定义效果
Dec 08 Javascript
jQuery实现获取元素索引值index的方法
Sep 18 Javascript
微信小程序 wx:for的使用实例详解
Apr 27 Javascript
JavaScript页面倒计时功能完整示例
May 15 Javascript
vue2配置scss的方法步骤
Jun 06 Javascript
通过js随机函数Math.random实现乱序
May 19 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
将PHP作为Shell脚本语言使用
2006/10/09 PHP
BBS(php &amp; mysql)完整版(一)
2006/10/09 PHP
PHP实现自动识别Restful API的返回内容类型
2015/02/07 PHP
PHP的Yii框架中行为的定义与绑定方法讲解
2016/03/18 PHP
PHP实现的猴王算法(猴子选大王)示例
2018/04/30 PHP
laravel validate 设置为中文的例子(验证提示为中文)
2019/09/29 PHP
js实现的网站首页随机公告随机公告
2007/03/14 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
jQuery+html5实现div弹出层并遮罩背景
2015/04/15 Javascript
JS实现光滑展开合拢的菜单效果代码
2015/09/16 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
JavaScript数组和对象的复制
2017/03/21 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
[js高手之路]原型式继承与寄生式继承详解
2017/08/28 Javascript
微信小程序实现的涂鸦功能示例【附源码下载】
2018/01/12 Javascript
vue-router实现编程式导航的代码实例
2019/01/19 Javascript
uni-app之APP和小程序微信授权方法
2019/05/09 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
Saltstack快速入门简单汇总
2016/03/01 Python
解决新版Pycharm中Matplotlib图像不在弹出独立的显示窗口问题
2019/01/15 Python
python实现日志按天分割
2019/07/22 Python
python 已知三条边求三角形的角度案例
2020/04/12 Python
python使用openpyxl操作excel的方法步骤
2020/05/28 Python
如何写python的配置文件
2020/06/07 Python
Python日志打印里logging.getLogger源码分析详解
2021/01/17 Python
资深生产主管自我评价
2013/09/22 职场文书
学前教育求职自荐信范文
2013/12/25 职场文书
酒店总经理欢迎词
2014/01/08 职场文书
公司业务员岗位职责
2014/03/18 职场文书
给市场的环保建议书
2014/05/14 职场文书
小学语文业务学习材料
2014/06/02 职场文书
老龄工作先进事迹
2014/08/15 职场文书
公务员政审个人总结
2015/02/12 职场文书
Elasticsearch 配置详解
2022/04/19 Java/Android
springboot创建的web项目整合Quartz框架的项目实践
2022/06/21 Java/Android