使用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 相关文章推荐
尽可能写&quot;友好&quot;的&quot;Javascript&quot;代码
Jan 09 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
JavaScript中的闭包介绍
Mar 15 Javascript
javascript实现控制浏览器全屏
Mar 30 Javascript
基于JS2Image实现圣诞树代码
Dec 24 Javascript
js初始化验证实例详解
Nov 26 Javascript
使用JS正则表达式 替换括号,尖括号等
Nov 29 Javascript
js点击任意区域弹出层消失实现代码
Dec 27 Javascript
浅谈HTTP 缓存的那些事儿
Oct 17 Javascript
vue中利用Promise封装jsonp并调取数据
Jun 18 Javascript
js实现无缝轮播图特效
May 09 Javascript
js不常见操作运算符总结
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字符编码问题之GB2312 VS UTF-8解决方法
2011/06/23 PHP
色色整理的PHP面试题集锦
2012/03/08 PHP
php实现递归抓取网页类实例
2015/04/03 PHP
解决laravel查询构造器中的别名问题
2019/10/17 PHP
jQuery性能优化28条建议你值得借鉴
2013/02/16 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
jQuery下拉菜单的实现代码
2016/11/03 Javascript
关于js中的鼠标事件总结
2017/07/11 Javascript
利用jQuery异步上传文件的插件用法详解
2017/07/19 jQuery
vue实现点击图片放大效果
2017/08/15 Javascript
详解react阻止无效重渲染的多种方式
2018/12/11 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
Layui数据表格之单元格编辑方式
2019/10/26 Javascript
vue单应用在ios系统中实现微信分享功能操作
2020/09/07 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
Python使用dis模块把Python反编译为字节码的用法详解
2016/06/14 Python
python 调用c语言函数的方法
2017/09/29 Python
python把数组中的数字每行打印3个并保存在文档中的方法
2018/07/17 Python
python实现图书借阅系统
2019/02/20 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
jupyter 导入csv文件方式
2020/04/21 Python
高街生活方式全球在线商店:AZBRO
2017/08/26 全球购物
香蕉共和国工厂店:Banana Republic Factory
2018/06/09 全球购物
巴西一家专门从事家居和装饰的连锁店:Camicado
2019/08/14 全球购物
英国计算机商店:Technextday
2019/12/28 全球购物
亮剑精神演讲稿
2014/05/23 职场文书
应聘护士求职信
2014/07/21 职场文书
学校安全责任书范本
2014/07/23 职场文书
校园广播稿精选
2014/10/01 职场文书
工作作风建设心得体会
2014/10/22 职场文书
2015新年寄语大全
2014/12/08 职场文书
预备党员半年考察意见
2015/06/01 职场文书
如何写好一份优秀的工作总结?
2019/06/21 职场文书
nginx限制并发连接请求数的方法
2021/04/01 Servers