使用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 multibox 全选
Mar 22 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
客户端限制只能上传jpg格式图片的js代码
Dec 09 Javascript
关于Javascript与iframe的那些事儿
Jul 04 Javascript
javascript创建动态表单的方法
Jul 25 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
vue-cli项目中怎么使用mock数据
Sep 27 Javascript
BootStrap中的模态框(modal,弹出层)功能示例代码
Nov 02 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 Javascript
微信小程序访问豆瓣电影api的实现方法
Mar 31 Javascript
JS实现横向轮播图(初级版)
Jun 24 Javascript
JavaScript实现拖拽盒子效果
Feb 06 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中使用php://input处理相同name值的表单数据
2015/02/03 PHP
php简单计算页面加载时间的方法
2015/06/19 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
laravel5.4利用163邮箱发送邮件的步骤详解
2017/09/22 PHP
php通过各种函数判断0和空
2020/07/04 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
Microsfot .NET Framework4.0框架 安装失败的解决方法
2013/08/14 Javascript
简单的两种Extjs formpanel加载数据的方式
2013/11/09 Javascript
jquery easyui 结合jsp简单展现table数据示例
2014/04/18 Javascript
jquery validate表单验证的基本用法入门
2016/01/18 Javascript
浅析Bootstrap缩略图组件与警示框组件
2016/04/29 Javascript
使用vue.js实现checkbox的全选和多个的删除功能
2017/02/17 Javascript
vue resource post请求时遇到的坑
2017/10/19 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
jQuery实现轮播图及其原理详解
2020/04/12 jQuery
Vue实现跑马灯效果
2020/05/25 Javascript
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
使用Django的模版来配合字符串翻译工作
2015/07/27 Python
Python如何获取文件指定行的内容
2020/05/27 Python
CSS3+js实现简单的时钟特效
2015/03/18 HTML / CSS
英国工具中心:UK Tool Centre
2017/07/10 全球购物
UGG美国官网:购买UGG雪地靴、拖鞋和鞋子
2017/12/31 全球购物
Mansur Gavriel官网:纽约市的一个设计品牌
2019/05/02 全球购物
德国领先的大尺码和超大尺码男装在线零售商:Bigtex
2019/06/22 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
教师个人的自我评价分享
2014/01/02 职场文书
科长个人四风问题整改措施思想汇报
2014/10/13 职场文书
人事局接收函
2015/01/30 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
三严三实·严以律己心得体会
2016/01/13 职场文书
详解Nginx 工作原理
2021/03/31 Servers
使用Python+OpenCV进行卡类型及16位卡号数字的OCR功能
2021/08/30 Python
Java设计模式之享元模式示例详解
2022/03/03 Java/Android