学习笔记:发现一个IE版本判断的好方法

web开发就不得不面对浏览器兼容性问题,特别是IE的兼容问题。在前端代码中经常要处理一些兼容格式,为了解决这个问题网上找了找识别浏览器版本的方法。

常规js方法

找到一个方法,还不错,可以识别出各种浏览器的版本:

 1 /**
 2  * 获取浏览器版本
 3  * @returns {Array}
 4  */
 5 function browserVersion() {
 6     var browserType = "";
 7     var browserVersion = 0;
 8     var ua = navigator.userAgent.toLocaleLowerCase();
 9  
10     if (ua.match(/msie/) != null) {
11         browserType = "IE";
12         browserVersion = ua.match(/msie ([\d.]+)/)[1];
13     } else if (ua.match(/trident/) != null && ua.match(/rv/) != null) {
14         browserType = "Edge";
15         browserVersion = ua.match(/rv:([\d.]+)/)[1];
16     } else if (ua.match(/firefox/) != null) {
17         browserType = "Firefox";
18         browserVersion = (ua.match(/firefox\/([\d.]+)/)[1]).replace(/[^0-9.]/ig,"");
19     } else if (ua.match(/opera/) != null) {
20         browserType = "Opera";
21         browserVersion = (ua.match(/opera\/([\d.]+)/)[1]).replace(/[^0-9.]/ig,"");
22     } else if (ua.match(/chrome/) != null) {
23         browserType = "Chrome";
24         browserVersion = (ua.match(/chrome\/([\d.]+)/)[1]).replace(/[^0-9.]/ig,"");
25     } else if (ua.match(/safari/) != null) {
26         browserType = "Safari";
27         browserVersion = (ua.match(/safari\/([\d.]+)/)[1]).replace(/[^0-9.]/ig,"");
28     }
29     var arr = new Array(browserType, browserVersion);
30     return arr;
31 }

在代码中直接使用也比较简单了。

IE的条件注释

在一次偶然的机会看网金社的前端代码,发现一段很特别的注释:

这个貌似有点神奇,看代码的意思是一个跳转,但显示是注释的语句,于是抱着试一试的态度将浏览器切换到IE低版本,果然是有效果的。赶紧网上开始找这方面的资料,有一些用法说明,看来确实是可行的方案。

条件注释属性:

gt : greater than,选择条件版本以上版本,不包含条件版本

lt : less than,选择条件版本以下版本,不包含条件版本

gte : greater than or equal,选择条件版本以上版本,包含条件版本

lte : less than or equal,选择条件版本以下版本,包含条件版本

! : 选择条件版本以外所有版本,无论高低

用法:

<!--[if IE]>用于 IE <![endif]-->

<!--[if IE 6]>用于 IE6 <![endif]-->

<!--[if IE 7]>用于 IE7 <![endif]-->

<!--[if IE 8]>用于 IE8 <![endif]-->

<!--[if IE 9]>用于 IE9 <![endif]-->

<!--[if gt IE 6]> 用于 IE6 以上版本<![endif]-->

<!--[if lte IE 7]> 用于 IE7或更低版本 <![endif]-->

<!--[if gte IE 8]>用于 IE8 或更高版本 <![endif]-->

<!--[if lt IE 9]>用于 IE9 以下版本<![endif]-->

<!--[if !IE]> -->用于非 IE <!-- <![endif]-->

参考:http://baike.sogou.com/v66165627.htm

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏xingoo, 一个梦想做发明家的程序员

Volatile的作用

众所周知,volatile关键字可以让线程的修改立刻通知其他的线程,从而达到数据一致的作用。那么它具体涉及到哪些内容呢? 关于缓存 计算机最大的存储空间就...

2158
来自专栏Android 研究

Android启动流程——1序言、bootloader引导与Linux启动

前面讲解的很多内容都很抽象,所以本次系列决定"接点地气",准备开始讲解大家熟悉的Activity了,为了让我以及大家更好的理解Activity,我决定本系列...

2741
来自专栏思考的代码世界

Python网络数据采集之使用API|第03天

百度百科关于API的解释:API(Application Programming Interface,应用程序编程接口)是一些预先定义的函数,目的是提供应用程序...

5117
来自专栏Python

Centos crontab定时任务

CRONTAB是一个用于设置周期性被执行的任务的工具,有了它,我们就可以从定时工作中解放出来。

1150
来自专栏点滴积累

linux下快速列出文件列表的方法

前言 这两天碰到一个很棘手的问题,需要读取出ubuntu系统中某个目录下所有文件,由于服务器中存储的文件实在太多,导致此过程效率十分低下,动辄需要等待一个小时之...

3465
来自专栏从零开始学自动化测试

Locust性能测试1-环境准备与基本使用

提到性能测试,大部分小伙伴想到的就是LR和jmeter这种工具,小编一直不太喜欢写这种工具类的东西,我的原则是能用代码解决的问题,尽量不去用工具。 python...

1581
来自专栏逢魔安全实验室

Linux无文件渗透执行ELF

4428
来自专栏xingoo, 一个梦想做发明家的程序员

【AngularJS】—— 11 指令的交互

前面基本了解了指令的相关内容:   1 如何自定义指令   2 指令的复用 本篇看一下指令之间如何交互。学习内容来自《慕课网 指令3》 背景介绍 ...

1999
来自专栏代码GG之家

深入Android源码系列(一)

? 本文讲解内容有 loadLibrary流程 linker ELF ndk开发以及配置调试版本 ndk-...

3196
来自专栏较真的前端

关于网络请求的面试题总结

2605

扫码关注云+社区

领取腾讯云代金券