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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
地址栏上的一段语句,改变页面的风格。(教程)
Apr 02 Javascript
JavaScript实现url地址自动检测并添加URL链接示例代码
Nov 12 Javascript
jQuery scroll事件实现监控滚动条分页示例
Apr 04 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
JavaScript常用小技巧小结
Dec 29 Javascript
JQuery中extend的用法实例分析
Feb 08 Javascript
在JavaScript中call()与apply()区别
Jan 22 Javascript
vue实现点击按钮下载文件功能
Oct 11 Javascript
微信小程序实现文件预览
Oct 22 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
js基于div丝滑实现贝塞尔曲线
Sep 23 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初学者头痛的十四个问题
2006/07/12 PHP
php 文件上传系统手记
2009/10/26 PHP
PHP 计算代码执行耗时的代码修正网上普遍错误
2011/05/14 PHP
PHP 面向对象详解
2012/09/13 PHP
wamp安装后自定义配置的方法
2014/08/23 PHP
PHP的cURL库简介及使用示例
2015/02/06 PHP
codeigniter显示所有脚本执行时间的方法
2015/03/21 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP中Session ID的实现原理实例分析
2019/08/17 PHP
用javascript控制iframe滚动的代码
2007/04/10 Javascript
表单元素事件 (Form Element Events)
2009/07/17 Javascript
js创建表单元素并使用submit进行提交
2014/08/14 Javascript
jquery 取子节点及当前节点属性值的方法
2014/08/24 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
input输入密码变黑点密文的实现方法
2017/01/09 Javascript
vue.js  父向子组件传参的实例代码
2017/10/29 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
Vue常用的几个指令附完整案例
2018/11/06 Javascript
利用vue3+ts实现管理后台(增删改查)
2020/10/30 Javascript
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
使用Python读取大文件的方法
2018/02/11 Python
python中format()函数的简单使用教程
2018/03/14 Python
python离线安装外部依赖包的实现
2020/02/13 Python
python实现马丁策略的实例详解
2021/01/15 Python
Python tkinter实现日期选择器
2021/02/22 Python
解决tensorflow模型压缩的问题_踩坑无数,总算搞定
2021/03/02 Python
美国在线自行车商店:Jenson USA
2018/05/22 全球购物
学生发电厂实习自我鉴定
2013/09/22 职场文书
应届生求职推荐信
2013/10/28 职场文书
大三毕业自我鉴定
2014/01/15 职场文书
班长演讲稿范文
2014/04/24 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
田径运动会广播稿
2015/08/19 职场文书
优秀团员主要事迹范文
2015/11/05 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js