使用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 相关文章推荐
两种简单实现菜单高亮显示的JS类代码
Jun 27 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
JavaScript高级程序设计 阅读笔记(十七) js事件
Aug 14 Javascript
seajs1.3.0源码解析之module依赖有序加载
Nov 07 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
利用vue写todolist单页应用
Dec 15 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
Bootstrap多级菜单的实现代码
May 23 Javascript
JS实现移动端判断上拉和下滑功能
Aug 07 Javascript
Vue 实现手动刷新组件的方法
Feb 19 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 PDO函数库详解
2010/04/27 PHP
PHP中trim()函数简单使用指南
2015/04/16 PHP
php中二分法查找算法实例分析
2016/09/22 PHP
网页图片延时加载的js代码
2010/04/22 Javascript
基于jquery的button默认enter事件(回车事件)。
2011/05/18 Javascript
js写一个弹出层并锁屏效果实现代码
2012/12/07 Javascript
CSS鼠标响应事件经过、移动、点击示例介绍
2013/09/04 Javascript
通过js简单实现将一个文本内容转译成加密文本
2013/10/22 Javascript
Javascript 实现图片无缝滚动
2014/12/19 Javascript
JavaScript中的fontsize()方法使用详解
2015/06/08 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
jQuery中hover与mouseover和mouseout的区别分析
2015/12/24 Javascript
Jsonp 关键字详解及json和jsonp的区别,ajax和jsonp的区别
2015/12/30 Javascript
jQuery实现的调整表格行tr上下顺序
2016/01/10 Javascript
js表单处理中单选、多选、选择框值的获取及表单的序列化
2016/03/08 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
Nuxt配合Node在实际生产中的应用详解
2018/08/07 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
说说如何利用 Node.js 代理解决跨域问题
2019/04/22 Javascript
JS实现数组删除指定元素功能示例
2019/06/05 Javascript
15 分钟掌握vue-next响应式原理
2019/10/13 Javascript
js实现适配移动端的拖动效果
2020/01/13 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python打开url并按指定块读取网页内容的方法
2015/04/29 Python
Python标准库itertools的使用方法
2020/01/17 Python
Django的CVB实例详解
2020/02/10 Python
python+selenium+chromedriver实现爬虫示例代码
2020/04/10 Python
pandas数据处理之绘图的实现
2020/06/15 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
美国学校校服,儿童和婴儿服装:Cookie’s Kids
2016/10/14 全球购物
阿联酋航空丹麦官方网站:Emirates DK
2019/08/25 全球购物
创业资金计划书
2014/02/06 职场文书
电气自动化求职信
2014/06/24 职场文书
南京导游词
2015/02/03 职场文书
车间质检员岗位职责
2015/04/08 职场文书
2015年感恩父亲节活动策划方案
2015/05/05 职场文书