使用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:sugggestion.js
Sep 02 Javascript
向JavaScript的数组中添加元素的方法小结
Oct 24 Javascript
jquery对象访问是什么及使用方法介绍
May 03 Javascript
JavaScript事件学习小结(一)事件流
Jun 09 Javascript
JavaScript实现解析INI文件内容的方法
Nov 17 Javascript
js实现简单的获取验证码按钮效果
Mar 03 Javascript
浅谈ECMAScript6新特性之let、const
Aug 02 Javascript
Angular4表单验证代码详解
Sep 03 Javascript
微信小程序实现image组件图片自适应宽度比例显示的方法
Jan 16 Javascript
深入解析ES6中的promise
Nov 08 Javascript
学习node.js 断言的使用详解
Mar 18 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与SQL注入攻击[三]
2007/04/17 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
Javascript中的String对象详谈
2014/03/03 Javascript
jquery解析xml字符串简单示例
2014/04/11 Javascript
node.js入门教程
2014/06/01 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
2015/09/01 Javascript
JavaScript编写检测用户所使用的浏览器的代码示例
2016/05/05 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
利用vue实现模态框组件
2016/12/19 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
Vue2.0 http请求以及loading展示实例
2018/03/06 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
Vue实现固定定位图标滑动隐藏效果
2019/05/30 Javascript
微信小程序实现手势滑动效果
2019/08/26 Javascript
IDEA配置jQuery, $符号不再显示黄色波浪线的问题
2020/10/09 jQuery
一分钟学会JavaScript中的try-catch
2020/12/14 Javascript
[42:20]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
[01:00:49]DOTA2-DPC中国联赛 正赛 Ehome vs iG BO3 第二场 1月31日
2021/03/11 DOTA
Python中使用Tkinter模块创建GUI程序实例
2015/01/14 Python
Python smallseg分词用法实例分析
2015/05/28 Python
老生常谈Python进阶之装饰器
2017/05/11 Python
Python虚拟环境项目实例
2017/11/20 Python
Python实现输入二叉树的先序和中序遍历,再输出后序遍历操作示例
2018/07/27 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
python实现从ftp服务器下载文件
2020/03/03 Python
Python如何生成xml文件
2020/06/04 Python
Python爬虫简单运用爬取代理IP的实现
2020/12/01 Python
Zavvi西班牙:电子游戏、极客服装、Blu-ray、Funko Pop等
2019/05/03 全球购物
大学生秋游活动方案
2014/02/17 职场文书
士力架广告词
2014/03/20 职场文书
3分钟演讲稿
2014/04/30 职场文书
市级三好学生事迹材料
2014/08/27 职场文书
专升本学生毕业自我鉴定
2014/10/04 职场文书
美术教师个人工作总结
2015/02/06 职场文书