使用jQuery判断IE浏览器版本的代码


Posted in Javascript onJune 14, 2014

IE还真是让设计师恨的牙痒痒的东西,且现在已经有IE6、IE7、IE8、IE9、IE10这个五种不同版本的浏览器,且都有一点小差异。但是没办法,为了让网页在每个浏览器中显示都一样还必须迁就它。

不过现在我基本上都不太愿意对低版本的IE去做兼容了。比如IE6、IE7这些直接忽略!IE8的话还凑合一下。好在IE9和IE10对网络标准支持都比较了,等IE9版本以上的浏览器普及以后就好很好了。

但是不做兼容归不做兼容,还是要简单的处理一下的。幸运的是 jQuery 提供了 browser 标记来让我们能判断现在的访客是用什么浏览器及版本:

<script type="text/javascript" src="http://img.3water.com/jslib/jquery/jquery.js"></script>
<script type="text/javascript">
 $(function() {
 var userAgent = window.navigator.userAgent.toLowerCase();
 var version = $.browser.version;
 $(".info").html(
  "<h3>userAgent:</h3>" + userAgent + "<br />" +
  "<h3>version:</h3>" + version
 );
 });
</script>
 
<body>
 <div class="info"></div>
</body>

我用了一点简单的范例来显示目前浏览器的 userAgent 及 jQuery.browser.version,接着在 IE 6~8 中测试,但其中显示的结果还真是让错愕咧!

使用jQuery判断IE浏览器版本的代码

使用jQuery判断IE浏览器版本的代码

使用jQuery判断IE浏览器版本的代码

从结果看来, IE 7 的判断是错误的,在仔细看它的 userAgent 时会发现,里面除了 msie 7.0 之外,还包含了 msie 6.0,因此导致 jQuery.browser.version 的比对就有问题了。既然已经知道问题,那我们就能针对问题来解决。

第一种方式是比较直接的方式,先判断 userAgent 中如果有出现较高版本的话,那就是依该版本为主:

当要使用时,就能用 $.browser.msie6~10 来做判断处理了。另一种就是直接修正 jQuery.browser.version 的比对方式:

<script type="text/javascript" src="http://img.3water.com/jslib/jquery/jquery.js"></script>
<script type="text/javascript">
 $(function() {
 var userAgent = window.navigator.userAgent.toLowerCase();
 
 $.browser.msie10 = $.browser.msie && /msie 10\.0/i.test(userAgent);
 $.browser.msie9 = $.browser.msie && /msie 9\.0/i.test(userAgent); 
 $.browser.msie8 = $.browser.msie && /msie 8\.0/i.test(userAgent);
 $.browser.msie7 = $.browser.msie && /msie 7\.0/i.test(userAgent);
 $.browser.msie6 = !$.browser.msie8 && !$.browser.msie7 && $.browser.msie && /msie 6\.0/i.test(userAgent);
 
 $(".info").html(
  "<h3>userAgent:</h3>" + userAgent + "<br />" +
  "<h3>Is IE 10?</h3>" + $.browser.msie10 +
  "<h3>Is IE 9?</h3>" + $.browser.msie9 +
  "<h3>Is IE 8?</h3>" + $.browser.msie8 +
  "<h3>Is IE 7?</h3>" + $.browser.msie7 +
  "<h3>Is IE 6?</h3>" + $.browser.msie6
 );
 });
</script>
 
<body>
 <div class="info"></div>
</body>

经过这样的修正之后,当我们再使用 jQuery.browser.version 来判断时就能正确的显示 IE 的版号了。两种方式都有其方便性,就看各位要选择那一种来使用???/p>

Javascript 相关文章推荐
一个tab标签切换效果代码
Mar 27 Javascript
Javascript base64编码实现代码
Dec 02 Javascript
JavaScript自定义事件介绍
Aug 29 Javascript
提取字符串中年月日的函数代码
Nov 05 Javascript
jQuery表格列宽可拖拽改变且兼容firfox
Sep 03 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
在DWR中实现直接获取一个JAVA类的返回值的两种方法
Dec 25 Javascript
javascript 闭包详解及简单实例应用
Dec 31 Javascript
ES6学习教程之对象字面量详解
Oct 09 Javascript
基于vue和bootstrap实现简单留言板功能
May 30 Javascript
vue.js实现照片放大功能
Jun 23 Javascript
jQuery Migrate 1.1.0 Released 注意事项
Jun 14 #Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
Jun 14 #Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 #Javascript
jquery实现倒计时代码分享
Jun 13 #Javascript
JS判断移动端访问设备并加载对应CSS样式
Jun 13 #Javascript
改变状态栏文字的js代码
Jun 13 #Javascript
js数组中如何随机取出一个值
Jun 13 #Javascript
You might like
PHP自带ZIP压缩、解压缩类ZipArchiv使用指南
2015/03/03 PHP
对PHP依赖注入的理解实例分析
2016/10/09 PHP
laravel5实现微信第三方登录功能
2018/12/06 PHP
MC Dialog js弹出层 完美兼容多浏览器(5.6更新)
2010/05/06 Javascript
GreyBox技术总结(转)
2010/11/23 Javascript
jQuery.buildFragment使用方法及思路分析
2013/01/07 Javascript
Jquery操作radio的简单实例
2014/01/06 Javascript
javascript实现简单的html5视频播放器
2015/05/06 Javascript
Bootstrap模态对话框的简单使用
2016/04/29 Javascript
jquery自定义插件开发之window的实现过程
2016/05/06 Javascript
利用js来实现缩略语列表、文献来源链接和快捷键列表
2016/12/16 Javascript
JavaScript函数基础详解
2017/02/03 Javascript
Angular 4依赖注入学习教程之InjectToken的使用(八)
2017/06/04 Javascript
Js利用Canvas实现图片压缩功能
2017/09/13 Javascript
Vue验证码60秒倒计时功能简单实例代码
2018/06/22 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
node.js事件轮询机制原理知识点
2019/12/22 Javascript
详解Vue之事件处理
2020/07/10 Javascript
JS+CSS实现炫酷光感效果
2020/09/05 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
web.py中调用文件夹内模板的方法
2014/08/26 Python
python rsa 加密解密
2017/03/20 Python
微信跳一跳python代码实现
2018/01/05 Python
python按综合、销量排序抓取100页的淘宝商品列表信息
2018/02/24 Python
python2.x实现人民币转大写人民币
2018/06/20 Python
正确理解Python中if __name__ == '__main__'
2019/01/24 Python
Django实现学员管理系统
2019/02/26 Python
Python流程控制 while循环实现解析
2019/09/02 Python
python将三维数组展开成二维数组的实现
2019/11/30 Python
使用python批量修改XML文件中图像的depth值
2020/07/22 Python
入党申请人的自我鉴定
2013/12/01 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
房产公证委托书范本
2014/09/20 职场文书
护士自荐信怎么写
2015/03/06 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
初中毕业感言300字
2015/07/31 职场文书