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 相关文章推荐
在myeclipse中如何加入jquery代码提示功能
Jun 03 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
JS模拟bootstrap下拉菜单效果实例
Jun 17 Javascript
1秒50万字!js实现关键词匹配
Aug 01 Javascript
bootstrap下拉列表与输入框组结合的样式调整
Oct 08 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
浅谈jquery拼接字符串效率比较高的方法
Feb 22 Javascript
JS实现的自动打字效果示例
Mar 10 Javascript
深究AngularJS之ui-router详解
Jun 13 Javascript
bootstrap3-dialog-master模态框使用详解
Aug 22 Javascript
JavaScript中的事件与异常捕获详析
Feb 24 Javascript
JavaScript使用canvas绘制随机验证码
Feb 17 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中判断文件存在是用file_exists还是is_file的整理
2012/09/12 PHP
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
Yii2中事务的使用实例代码详解
2016/09/07 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
laravel5.1 ajax post 传值_token示例
2019/10/24 PHP
Laravel Eloquent分表方法并使用模型关联的实现
2019/11/25 PHP
javascript 用记忆函数快速计算递归函数
2010/03/15 Javascript
基于JQuery的一个简单的鼠标跟随提示效果
2010/09/23 Javascript
js+css实现增加表单可用性之提示文字
2013/06/03 Javascript
Ext JS添加子组件的误区探讨
2013/06/28 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
开启BootStrap学习之旅
2016/05/04 Javascript
浅谈在fetch方法中添加header后遇到的预检请求问题
2017/08/31 Javascript
详解如何解决vue开发请求数据跨域的问题(基于浏览器的配置解决)
2018/11/12 Javascript
vue基础之v-bind属性、class和style用法分析
2019/03/11 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
JavaScript HTML DOM 元素 (节点)新增,编辑,删除操作实例分析
2020/03/02 Javascript
js实现简单点赞操作
2020/03/17 Javascript
JS实现图片懒加载(lazyload)过程详解
2020/04/02 Javascript
Vuex实现购物车小功能
2020/08/17 Javascript
python shell根据ip获取主机名代码示例
2017/11/25 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
python+POP3实现批量下载邮件附件
2018/06/19 Python
Django框架实现的分页demo示例
2019/05/25 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
Python编写带选项的命令行程序方法
2019/08/13 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
Pyside2中嵌入Matplotlib的绘图的实现
2021/02/22 Python
美国保健品专家:Life Extension
2018/05/04 全球购物
机电一体化大学生求职信
2013/11/08 职场文书
《雨霖铃》教学反思
2014/02/22 职场文书
课堂教学改革实施方案
2014/03/17 职场文书
群众路线教育实践活动学习笔记
2014/11/05 职场文书
OpenCV项目实践之停车场车位实时检测
2022/04/11 Python