使用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 模拟实现类似c#下的hashtable的简单功能代码
Jan 24 Javascript
新老版本juqery获取radio对象的方法
Mar 01 Javascript
Javascript笔记一 js以及json基础使用说明
May 22 Javascript
JS date对象的减法处理实现代码
Dec 28 Javascript
HTML5之lang属性与dir属性的详解
Jun 19 Javascript
javascript中怎么做对象的类型判断
Nov 11 Javascript
jQueryUI中的datepicker使用方法详解
May 25 Javascript
jquery点赞功能实现代码 点个赞吧!
May 29 jQuery
Vue Spa切换页面时更改标题的实例代码
Jul 15 Javascript
vue 循环加载数据并获取第一条记录的方法
Sep 26 Javascript
微信公众号平台接口开发 菜单管理的实现
Aug 14 Javascript
中级前端工程师必须要掌握的27个JavaScript 技巧(干货总结)
Sep 23 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 文件扩展名 获取函数
2009/06/03 PHP
Java和PHP在Web开发方面对比分析
2015/03/01 PHP
PHP如何通过date() 函数格式化显示时间
2020/11/13 PHP
javascript 自定义事件初探
2009/08/21 Javascript
javascript 仿QQ滑动菜单效果代码
2010/09/03 Javascript
浅谈Javascript面向对象编程
2011/11/15 Javascript
深入了解javascript中的prototype与继承
2013/04/14 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
jQuery简单实现网页选项卡特效
2014/11/24 Javascript
Express的路由详解
2015/12/10 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
2016/12/19 Javascript
jQuery开源组件BootstrapValidator使用详解
2017/06/29 jQuery
vue component组件使用方法详解
2017/07/14 Javascript
微信小程序实时聊天WebSocket
2018/07/05 Javascript
vue elementUI tree树形控件获取父节点ID的实例
2018/09/12 Javascript
js隐式转换的知识实例讲解
2018/09/28 Javascript
详解基于vue-cli3.0如何构建功能完善的前端架子
2018/10/09 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
微信小程序自定义yPicker组件实现省市区三级联动功能
2020/10/29 Javascript
[03:42]2014DOTA2西雅图国际邀请赛7月9日TOPPLAY
2014/07/09 DOTA
详细解析Python中__init__()方法的高级应用
2015/05/11 Python
Sanic框架基于类的视图用法示例
2018/07/18 Python
详解使用Python下载文件的几种方法
2019/10/13 Python
windows中安装Python3.8.0的实现方法
2019/11/19 Python
python3环境搭建过程(利用Anaconda+pycharm)完整版
2020/08/19 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
敬老文明号事迹材料
2014/01/16 职场文书
俄语专业毕业生求职信
2014/07/12 职场文书
青年教师师德演讲稿
2014/08/26 职场文书
校园运动会广播稿
2014/10/06 职场文书
2014年技术部工作总结
2014/12/12 职场文书
产品质量保证书范本
2015/02/27 职场文书
大学迎新生欢迎词
2015/09/29 职场文书
2019年思想汇报
2019/06/20 职场文书
详解Python自动化之文件自动化处理
2021/06/21 Python