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 相关文章推荐
图片自动更新(说明)
Oct 02 Javascript
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
Javascript实现div的toggle效果实例分析
Jun 09 Javascript
javascript css红色经典选项卡效果实现代码
May 17 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
前端程序员必须知道的高性能Javascript知识
Aug 24 Javascript
js获取腾讯视频ID的方法
Oct 03 Javascript
javascript 注释代码的几种方法总结
Jan 04 Javascript
javascript深拷贝的原理与实现方法分析
Apr 10 Javascript
AngularJS通过ng-Img-Crop实现头像截取的示例
Aug 17 Javascript
web前端页面生成exe可执行文件的方法
Feb 08 Javascript
vue-cli3添加模式配置多环境变量的方法
Jun 05 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
整理的9个实用的PHP库简介和下载
2010/11/09 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
php empty()与isset()区别的详细介绍
2013/06/17 PHP
php字符串按照单词进行反转的方法
2015/03/14 PHP
php编写简单的文章发布程序
2015/06/18 PHP
PHP基于面向对象实现的留言本功能实例
2018/04/04 PHP
PHP PDOStatement::getAttribute讲解
2019/02/01 PHP
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
Jquery插件之Fancybox丰富的弹出层效果附源码下载
2015/12/02 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
2017/03/24 Javascript
JS实现向iframe中表单传值的方法
2017/03/24 Javascript
JavaScript定时器setTimeout()和setInterval()详解
2017/08/18 Javascript
微信小程序实现跑马灯效果完整代码(附效果图)
2018/05/30 Javascript
解决layer 关闭当前弹窗 关闭遮罩层 input值获取不到的问题
2019/09/25 Javascript
Vue3 的响应式和以前有什么区别,Proxy 无敌?
2020/05/20 Javascript
[48:51]完美世界DOTA2联赛PWL S2 Magma vs InkIce 第一场 11.28
2020/12/02 DOTA
Python中os和shutil模块实用方法集锦
2014/05/13 Python
Python数据结构与算法之常见的分配排序法示例【桶排序与基数排序】
2017/12/15 Python
django静态文件加载的方法
2018/05/20 Python
python读取LMDB中图像的方法
2018/07/02 Python
Python对CSV、Excel、txt、dat文件的处理
2018/09/18 Python
spark dataframe 将一列展开,把该列所有值都变成新列的方法
2019/01/29 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
浅析Python 引号、注释、字符串
2019/07/25 Python
OPPO手机官方商城:中国手机市场出货量第一品牌
2017/10/18 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
当当网软件测试笔试题
2015/11/24 面试题
小区门卫值班制度
2014/01/24 职场文书
经典婚礼主持词
2014/03/13 职场文书
群众路线教育党员自我剖析材料
2014/10/06 职场文书
汤姆索亚历险记读书笔记
2015/06/29 职场文书
学校标语口号大全
2015/12/26 职场文书
使用pycharm运行flask应用程序的详细教程
2021/06/07 Python
Python卷积神经网络图片分类框架详解分析
2021/11/07 Python