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 相关文章推荐
Jquery实现网页跳转或用命令打开指定网页的解决方法
Jul 09 Javascript
node.js中的path.sep方法使用说明
Dec 08 Javascript
实例讲解JS中setTimeout()的用法
Jan 28 Javascript
AngularJS中关于ng-class指令的几种实现方式详解
Sep 17 Javascript
微信小程序 loading(加载中提示框)实例
Oct 28 Javascript
如何实现json数据可视化详解
Nov 24 Javascript
seaJs使用心得之exports与module.exports的区别实例分析
Oct 13 Javascript
Angular实现的日程表功能【可添加及隐藏显示内容】
Dec 27 Javascript
vue.js 添加 fastclick的支持方法
Aug 28 Javascript
微信小程序8种数据通信的方式小结
Feb 03 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 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面向对象全攻略 (八)重载新的方法
2009/09/30 PHP
PHP iconv 解决utf-8和gb2312编码转换问题
2010/04/12 PHP
PHP APC缓存配置、使用详解
2014/03/06 PHP
php检测useragent版本示例
2014/03/24 PHP
laravel中的一些简单实用功能
2018/11/03 PHP
JQuery 选择器 xpath 语法应用
2010/05/13 Javascript
$.get获取一个文件的内容示例代码
2013/09/11 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
angularJS中$apply()方法详解
2015/01/07 Javascript
Nodejs学习笔记之NET模块
2015/01/13 NodeJs
jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)
2016/08/25 Javascript
jQuery中animate的几种用法与注意事项
2016/12/12 Javascript
AngularJS报错$apply already in progress的解决方法分析
2017/01/30 Javascript
VUE中使用Vue-resource完成交互
2017/07/21 Javascript
详解nodejs中express搭建权限管理系统
2017/09/15 NodeJs
layer.open 按钮的点击事件关闭方法
2018/08/17 Javascript
微信小程序之事件交互操作实例分析
2018/12/03 Javascript
react高阶组件添加和删除props
2019/04/26 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
python学习基础之循环import及import过程
2018/04/22 Python
Python+selenium实现自动循环扔QQ邮箱漂流瓶
2018/05/29 Python
Python面向对象程序设计示例小结
2019/01/30 Python
django与小程序实现登录验证功能的示例代码
2019/02/19 Python
windows上安装python3教程以及环境变量配置详解
2019/07/18 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
浅谈优化Django ORM中的性能问题
2020/07/09 Python
丝芙兰美国官网:SEPHORA美国
2016/08/03 全球购物
苹果美国官方商城:Apple美国
2016/08/24 全球购物
世界第一曲奇连锁店:Mrs. Fields Cookies
2017/02/04 全球购物
Mankind西班牙男士护肤品网站:购买皮肤护理、护发和剃须
2017/04/27 全球购物
职业生涯规划书基本格式
2014/01/06 职场文书
生物科学专业毕业生求职信
2014/06/02 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
MySQL约束超详解
2021/09/04 MySQL
JavaScript高级程序设计之变量与作用域
2021/11/17 Javascript