使用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 相关文章推荐
window.location.hash 使用说明
Nov 08 Javascript
兼容IE和Firefox的javascript获取iframe文档内容的函数
Aug 15 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
js select option对象小结
Dec 20 Javascript
javaScript 页面自动加载事件详解
Feb 10 Javascript
jQuery设置和获取HTML、文本和值示例
Jul 08 Javascript
浅谈jQuery中hide和fadeOut的区别 show和fadeIn的区别
Aug 18 Javascript
jQuery与js实现颜色渐变的方法
Dec 30 Javascript
微信小程序框架wepy之动态控制类名
Sep 14 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
如何解决日期函数new Date()浏览器兼容性问题
Sep 11 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 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
火影忍者:三大瞳力之一的白眼,为什么没有写轮眼那么出色?
2020/03/02 日漫
PHP中捕获超时事件的方法实例
2015/02/12 PHP
php字符串操作针对负值的判断分析
2016/07/28 PHP
jQuery UI 应用不同Theme的办法
2010/09/12 Javascript
自己实现string的substring方法 人民币小写转大写,数字反转,正则优化
2012/09/02 Javascript
Jquery attr(&quot;checked&quot;) 返回checked或undefined 获取选中失效
2013/10/10 Javascript
javascript获取select的当前值示例代码(兼容IE/Firefox/Opera/Chrome)
2013/12/17 Javascript
javascript表单验证使用示例(javascript验证邮箱)
2014/01/07 Javascript
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
原生JS实现响应式瀑布流布局
2015/04/02 Javascript
用户代理字符串userAgent可实现的四个识别
2015/09/20 Javascript
学习JavaScript设计模式之策略模式
2016/01/12 Javascript
JavaScript制作简单分页插件
2016/09/11 Javascript
Html中 IFrame的用法及注意点
2016/12/22 Javascript
jQuery插件FusionCharts实现的2D面积图效果示例【附demo源码下载】
2017/03/06 Javascript
React Native react-navigation 导航使用详解
2017/12/01 Javascript
基于Node.js实现压缩和解压缩的方法
2018/02/13 Javascript
官方推荐react-navigation的具体使用详解
2018/05/08 Javascript
基于js Canvas实现二次贝塞尔曲线
2018/12/25 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
Python中用sleep()方法操作时间的教程
2015/05/22 Python
python生成器,可迭代对象,迭代器区别和联系
2018/02/04 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
在python中利用opencv简单做图片比对的方法
2019/01/24 Python
python顺序执行多个py文件的方法
2019/06/29 Python
pygame实现打字游戏
2021/02/19 Python
python 如何利用argparse解析命令行参数
2020/09/11 Python
详解Pycharm安装及Django安装配置指南
2020/09/15 Python
常用的HTML5列表标签
2017/06/20 HTML / CSS
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
企业领导班子四风对照检查材料
2014/09/27 职场文书
公司酒会主持词
2015/07/02 职场文书
小学二年级班主任工作经验交流材料
2015/11/02 职场文书
深入解析MySQL索引数据结构
2021/10/16 MySQL