使用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切换js代码
Sep 20 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
动态加载js、css的简单实现代码
May 26 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
Jun 17 Javascript
Javascript将双字节字符转换成单字节字符并计算长度
Jun 22 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
Vue中img的src属性绑定与static文件夹实例
May 18 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
微信小程序实现tab和swiper切换结合效果
Jul 17 Javascript
vue打包之后生成一个配置文件修改接口的方法
Dec 09 Javascript
浅谈JS的二进制家族
May 09 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中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
js函数般调用正则
2008/04/08 Javascript
javascript使用正则控制input输入框允许输入的值方法大全
2014/06/19 Javascript
让JavaScript和其它资源并发下载的方法
2014/10/16 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
JavaScript代码实现左右上下自动晃动自动移动
2016/04/08 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
JS+HTML+CSS实现轮播效果
2017/11/28 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
详解jQuery设置内容和属性
2019/04/11 jQuery
JS求1到任意数之间的所有质数的方法详解
2019/05/20 Javascript
Vue 页面权限控制和登陆验证功能的实例代码
2019/06/20 Javascript
使用jQuery实现购物车
2020/10/29 jQuery
Python聚类算法之DBSACN实例分析
2015/11/20 Python
python中快速进行多个字符替换的方法小结
2016/12/15 Python
python @propert装饰器使用方法原理解析
2019/12/25 Python
浅谈Pytorch torch.optim优化器个性化的使用
2020/02/20 Python
pymongo insert_many 批量插入的实例
2020/12/05 Python
20行代码教你用python给证件照换底色的方法示例
2021/02/05 Python
澳大利亚现代波西米亚风格女装网站:Bohemian Traders
2018/04/16 全球购物
介绍一下grep命令的使用
2012/06/28 面试题
竞聘上岗演讲稿范文
2014/01/10 职场文书
心理咨询承诺书
2014/05/20 职场文书
检讨书模板
2015/01/29 职场文书
公司禁烟通知
2015/04/23 职场文书
2015年城乡环境综合治理工作总结
2015/07/24 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
python实现A*寻路算法
2021/06/13 Python
javascript条件式访问属性和箭头函数介绍
2021/11/17 Javascript
分享几个简单MySQL优化小妙招
2022/03/31 MySQL