使用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 相关文章推荐
另一个javascript小测验(代码集合)
Jul 27 Javascript
Extjs4.0设置Ext.data.Store传参的请求方式(默认为GET)
Apr 02 Javascript
JS限制Textarea文本域字符个数的具体实现
Aug 02 Javascript
jQuery实现MSN中文网滑动Tab菜单效果代码
Sep 09 Javascript
基于jquery实现日历签到功能
Sep 11 Javascript
jQuery使用zTree插件实现树形菜单和异步加载
Feb 25 Javascript
jQuery时间日期三级联动(推荐)
Nov 27 Javascript
Bootstrap页面缩小变形的快速解决办法
Feb 03 Javascript
Vue表单控件绑定图文详解
Feb 11 Javascript
react native 原生模块桥接的简单说明小结
Feb 26 Javascript
js new Date()实例测试
Oct 31 Javascript
vue使用echarts图表自适应的几种解决方案
Dec 04 Vue.js
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+Html+缓存
2006/12/20 PHP
php公用函数列表[正则]
2007/02/22 PHP
PHP中限制IP段访问、禁止IP提交表单的代码
2011/04/23 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
PHP7新增运算符用法实例分析
2016/09/26 PHP
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
js用正则表达式来验证表单(比较齐全的资源)
2013/11/17 Javascript
js获取下拉列表框中的value和text的值示例代码
2014/01/11 Javascript
js实现屏幕自适应局部代码分享
2015/01/30 Javascript
jQuery实现菜单感应鼠标滑动动画效果的方法
2015/02/28 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
easyui messager alert 三秒后自动关闭提示的实例
2016/11/07 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
整理关于Bootstrap列表组的慕课笔记
2017/03/29 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
Agularjs妙用双向数据绑定实现手风琴效果
2017/05/26 Javascript
微信小程序导航栏跟随滑动效果的实现代码
2019/05/14 Javascript
在Vue中使用Echarts实例图的方法实例
2020/10/10 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
Python3实现生成随机密码的方法
2014/08/23 Python
Python+微信接口实现运维报警
2016/08/27 Python
Python 反转字符串(reverse)的方法小结
2018/02/20 Python
python3实现windows下同名进程监控
2018/06/21 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
Python常用断言函数实例汇总
2020/11/30 Python
html5开发三八女王节表白神器
2018/03/07 HTML / CSS
PPP协议组成及简述协议协商的基本过程
2015/05/28 面试题
酒店副总岗位职责
2013/12/24 职场文书
公司司机岗位职责范本
2014/03/03 职场文书
电子装配专业毕业生求职信
2014/04/23 职场文书
理发店策划方案
2014/06/05 职场文书
小学生教师节演讲稿
2014/09/03 职场文书
2015年高三班主任工作总结
2015/05/21 职场文书
我在伊朗长大观后感
2015/06/16 职场文书
有关三国演义的读书笔记
2015/06/25 职场文书
大学军训口号大全
2015/12/24 职场文书