使用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 OOP类与继承
Nov 15 Javascript
js操作CheckBoxList实现全选/反选(在客服端完成)
Feb 02 Javascript
JavaScript中document对象使用详解
Jan 06 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
AngularJS extend用法详解及实例代码
Nov 15 Javascript
JS简单实现自定义右键菜单实例
May 31 Javascript
基于hover的用法实例(推荐)
Jul 04 Javascript
详解react-webpack2-热模块替换[HMR]
Aug 03 Javascript
two.js之实现动画效果示例
Nov 06 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
Javascript删除数组里的某个元素
Feb 28 Javascript
vue swipeCell滑动单元格(仿微信)的实现示例
Sep 14 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代码(抓取网页中的邮箱地址)
2012/07/17 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
Laravel中扩展Memcached缓存驱动实现使用阿里云OCS缓存
2015/02/10 PHP
php中header跳转使用include包含解决参数丢失问题
2015/05/08 PHP
Yii使用Captcha验证码的方法
2015/12/28 PHP
图文详解PHP环境搭建教程
2016/07/16 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
Laravel 关联模型-关联新增和关联更新的方法
2019/10/10 PHP
angularjs中的e2e测试实例
2014/12/06 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
创建一般js对象的几种方式
2017/01/19 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
webpack中如何使用雪碧图的示例代码
2018/11/11 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
在vue中动态添加class类进行显示隐藏实例
2019/11/09 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
2020/07/29 Javascript
swiper实现导航滚动效果
2020/12/13 Javascript
[02:52]DOTA2新手基础教程 米波
2014/01/21 DOTA
python实现的阳历转阴历(农历)算法
2014/04/25 Python
Python变量和字符串详解
2017/04/29 Python
Python批量查询域名是否被注册过
2017/06/21 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
使用Python爬虫库requests发送表单数据和JSON数据
2020/01/25 Python
用python制作个音乐下载器
2021/01/30 Python
学点简单的Django之第一个Django程序的实现
2021/02/24 Python
Linux中如何用命令创建目录
2016/12/02 面试题
关于人生的感言
2014/01/17 职场文书
个人自我评价范文
2014/02/05 职场文书
临床医师个人自我评价
2014/04/06 职场文书
教师业务学习材料
2014/12/16 职场文书
新闻稿格式范文
2015/07/18 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
浅谈MySQL user权限表
2021/06/18 MySQL