使用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实现UrlEncode和UrlDecode的脚本代码
Jul 23 Javascript
jquery offset函数应用实例
Nov 14 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 Javascript
JavaScript实现网页加载进度条代码超简单
Sep 21 Javascript
谈谈基于iframe、FormData、FileReader三种无刷新上传文件的方法
Dec 03 Javascript
jquery获取css的color值返回RGB的方法
Dec 18 Javascript
jQuery实现二级下拉菜单效果
Jan 05 Javascript
js实现上传文件添加和删除文件选择框
Oct 24 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
微信小程序音乐播放器开发
Nov 20 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图片处理函数获取类型及扩展名实例
2014/11/19 PHP
php页面,mysql数据库转utf-8乱码,utf-8编码问题总结
2015/08/27 PHP
Yii实现简单分页的方法
2016/04/29 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
2009/02/17 Javascript
jquery 子窗口操作父窗口的代码
2009/09/21 Javascript
javascript 面向对象全新理练之数据的封装
2009/12/03 Javascript
javascript 动态设置已知select的option的value值的代码
2009/12/16 Javascript
javascript full screen 全屏显示页面元素的方法
2013/09/27 Javascript
Angularjs整合微信UI(weui)
2016/03/15 Javascript
深入理解JavaScript中为什么string可以拥有方法
2016/05/24 Javascript
浅谈js中test()函数在正则中的使用
2016/08/19 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
利用Angular2的Observables实现交互控制的方法
2018/12/27 Javascript
vuex实现及简略解析(小结)
2019/03/01 Javascript
python中bisect模块用法实例
2014/09/25 Python
Python实现的简单发送邮件脚本分享
2014/11/07 Python
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Python合并多个装饰器小技巧
2015/04/28 Python
Python的Django框架中设置日期和字段可选的方法
2015/07/17 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
浅谈Python traceback的优雅处理
2018/08/31 Python
python聚类算法解决方案(rest接口/mpp数据库/json数据/下载图片及数据)
2019/08/28 Python
用Python实现校园通知更新提醒功能
2019/11/23 Python
python 变量初始化空列表的例子
2019/11/28 Python
解决Tensorflow2.0 tf.keras.Model.load_weights() 报错处理问题
2020/06/12 Python
香港优质食材和美酒专门店:FoodWise
2017/09/01 全球购物
沃达丰英国有限公司:Vodafone英国
2019/04/16 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
幼师专业毕业生自荐信
2013/09/29 职场文书
化工机械应届生求职信
2013/11/04 职场文书
草船借箭教学反思
2014/02/03 职场文书
大学生个人学年总结
2015/02/15 职场文书
2015年护士节慰问信
2015/03/23 职场文书
在人间读书笔记
2015/06/30 职场文书