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 命名规则 变量命名规则
Feb 25 Javascript
Javascript new Date().valueOf()的作用与时间戳由来详解
Apr 24 Javascript
JavaScript中统计Textarea字数并提示还能输入的字符
Jun 10 Javascript
jQuery获取与设置iframe高度的方法
Aug 01 Javascript
js HTML5手机刮刮乐代码
Sep 29 Javascript
node.js实现登录注册页面
Apr 08 Javascript
Bootstrap实现各种进度条样式详解
Apr 13 Javascript
json的结构与遍历方法实例分析
Apr 25 Javascript
js随机生成一个验证码
Jun 01 Javascript
微信小程序HTTP接口请求封装代码实例
Sep 05 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 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
10条PHP高级技巧[修正版]
2011/08/02 PHP
基于php设计模式中工厂模式详细介绍
2013/05/15 PHP
thinkphp3.2.3 分页代码分享
2016/07/28 PHP
PHP连接MYSQL数据库的3种常用方法
2017/02/27 PHP
PHP+Apache实现二级域名之间共享cookie的方法
2019/07/24 PHP
PHP替换Word中变量并导出PDF图片的实现方法
2020/11/26 PHP
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
JavaScript prototype属性深入介绍
2012/11/27 Javascript
jQuery使用数组编写图片无缝向左滚动
2012/12/11 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
2013/11/22 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
2014/09/03 Javascript
浅析在javascript中创建对象的各种模式
2016/05/06 Javascript
浅谈angular懒加载的一些坑
2016/08/20 Javascript
NodeJS远程代码执行
2016/08/28 NodeJs
JS仿京东移动端手指拨动切换轮播图效果
2020/04/10 Javascript
微信小程序 picker 组件详解及简单实例
2017/01/10 Javascript
jquery实现拖动效果(代码分享)
2017/01/25 Javascript
微信小程序 chooseImage选择图片或者拍照
2017/04/07 Javascript
vue.js vue-router如何实现无效路由(404)的友好提示
2017/12/20 Javascript
详解.vue文件中style标签的几个标识符
2018/07/17 Javascript
nodejs 递归拷贝、读取目录下所有文件和目录
2019/07/18 NodeJs
谈谈JavaScript中的函数
2020/09/08 Javascript
Python Matplotlib库入门指南
2015/05/18 Python
python基于隐马尔可夫模型实现中文拼音输入
2016/04/01 Python
浅谈python字符串方法的简单使用
2016/07/18 Python
python的unittest测试类代码实例
2017/12/07 Python
Django认证系统实现的web页面实现代码
2019/08/12 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
delegate与普通函数的区别
2014/01/22 面试题
医学院毕业生自荐信
2013/11/08 职场文书
关于元旦的广播稿
2014/02/16 职场文书
小学三八妇女节活动方案
2014/03/16 职场文书
最新大学生创业计划书写作攻略
2014/04/02 职场文书
综合素质评价个性与发展自我评价
2015/03/06 职场文书
雷锋的观后感
2015/06/10 职场文书
六一亲子活动感想
2015/08/07 职场文书