使用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 汉字字节判断
Aug 01 Javascript
基于JQuery.timer插件实现一个计时器
Apr 25 Javascript
js 手机号码合法性验证代码集合
Sep 29 Javascript
jquery实现多级下拉菜单的实例代码
Oct 02 Javascript
JQuery validate插件Remote用法大全
May 15 Javascript
简单的分页代码js实现
May 17 Javascript
vue2.0开发实践总结之疑难篇
Dec 07 Javascript
JavaScript变量作用域_动力节点Java学院整理
Jun 27 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
elementUI select组件默认选中效果实现的方法
Mar 25 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 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实现上传文件并存进数据库的方法
2015/07/16 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
最新制作ThinkPHP3.2.3完全开发手册
2015/11/23 PHP
浅谈PHP值mysql操作类
2016/06/29 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
Js获取事件对象代码
2010/08/05 Javascript
JavaScript高级程序设计(第3版)学习笔记12 js正则表达式
2012/10/11 Javascript
javascript中的取反再取反~~没有意义
2014/04/06 Javascript
AngularJS入门教程(一):静态模板
2014/12/06 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
jQuery实现的兼容性浮动层示例
2016/08/02 Javascript
微信小程序实现签到功能
2018/10/31 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
bootstrap Table实现合并相同行
2019/07/19 Javascript
vue之debounce属性被移除及处理详解
2019/11/13 Javascript
详解js中的原型,原型对象,原型链
2020/07/16 Javascript
vue中利用three.js实现全景图的完整示例
2020/12/07 Vue.js
Python中字符编码简介、方法及使用建议
2015/01/08 Python
python实现SMTP邮件发送功能
2020/06/16 Python
python使用pymysql实现操作mysql
2016/09/13 Python
python如何派生内置不可变类型并修改实例化行为
2018/03/21 Python
对Tensorflow中权值和feature map的可视化详解
2018/06/14 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
python中selenium库的基本使用详解
2020/07/31 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
HTML5中的autofocus(自动聚焦)属性介绍
2014/04/23 HTML / CSS
html5默认气泡修改的代码详解
2020/03/13 HTML / CSS
英国鞋类及配饰零售商:Kurt Geiger
2017/02/04 全球购物
英国家庭珠宝商:T. H. Baker
2018/02/08 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
咖啡馆创业计划书
2014/01/26 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
政府四风问题整改措施
2014/10/04 职场文书
2014年综合治理工作总结
2014/11/20 职场文书
安全伴我行主题班会
2015/08/13 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers