JS如何判断浏览器类型和详细区分IE各版本浏览器


Posted in Javascript onMarch 04, 2017

今天用到JS判断浏览器类型,于是就系统整理了一下,便于后期使用。

/* 
  * 描述:判断浏览器信息 
  * 编写:LittleQiang_w 
  * 日期:2016.1.5 
  * 版本:V1.1 
  */ 
 
 //判断当前浏览类型 
 function BrowserType() 
 { 
   var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 
   var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器 
   var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器 
   var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器 
   var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器 
   var isSafari = userAgent.indexOf("Safari") > -1 && userAgent.indexOf("Chrome") == -1; //判断是否Safari浏览器 
   var isChrome = userAgent.indexOf("Chrome") > -1 && userAgent.indexOf("Safari") > -1; //判断Chrome浏览器 
 
   if (isIE)  
   { 
      var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); 
      reIE.test(userAgent); 
      var fIEVersion = parseFloat(RegExp["$1"]); 
      if(fIEVersion == 7) 
      { return "IE7";} 
      else if(fIEVersion == 8) 
      { return "IE8";} 
      else if(fIEVersion == 9) 
      { return "IE9";} 
      else if(fIEVersion == 10) 
      { return "IE10";} 
      else if(fIEVersion == 11) 
      { return "IE11";} 
      else 
      { return "0"}//IE版本过低 
    }//isIE end 
     
    if (isFF) { return "FF";} 
    if (isOpera) { return "Opera";} 
    if (isSafari) { return "Safari";} 
    if (isChrome) { return "Chrome";} 
    if (isEdge) { return "Edge";} 
  }//myBrowser() end 
   
  //判断是否是IE浏览器 
  function isIE() 
  { 
   var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 
   var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器 
   if(isIE) 
   { 
     return "1"; 
   } 
   else 
   { 
     return "-1"; 
   } 
  } 
   
   
  //判断是否是IE浏览器,包括Edge浏览器 
  function IEVersion() 
  { 
   var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 
   var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器 
var isEdge = userAgent.indexOf("Windows NT 6.1; Trident/7.0;") > -1 && !isIE; //判断是否IE的Edge浏览器 
   if(isIE) 
   { 
      var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); 
      reIE.test(userAgent); 
      var fIEVersion = parseFloat(RegExp["$1"]); 
      if(fIEVersion == 7) 
      { return "IE7";} 
      else if(fIEVersion == 8) 
      { return "IE8";} 
      else if(fIEVersion == 9) 
      { return "IE9";} 
      else if(fIEVersion == 10) 
      { return "IE10";} 
      else if(fIEVersion == 11) 
      { return "IE11";} 
      else 
      { return "0"}//IE版本过低 
   } 
else if(isEdge) 
{ 
  return "Edge"; 
} 
   else 
   { 
     return "-1";//非IE 
   } 
  }

以上代码通过测试,可用!

但存在一个问题,即IE5与IE7浏览器暂不能区分,以下是IE5与IE7下userAgent的信息;通过userAgent发现,简单的通过以上方法,无法正确区分IE5和IE7。期待该问题的解决方案!!!

IE5: userAgent   "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.2; .NET4.0E)"

IE7: userAgent  "Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; .NET4.0C; InfoPath.2; .NET4.0E)"

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery插件 cluetip 关键词注释
Jan 12 Javascript
js中将具有数字属性名的对象转换为数组
Mar 06 Javascript
如何学习Javascript入门指导
Nov 01 Javascript
JQuery简单实现锚点链接的平滑滚动
May 03 Javascript
一次围绕setTimeout的前端面试经验分享
Jun 15 Javascript
微信小程序scroll-x失效的完美解决方法
Jul 18 Javascript
JS使用canvas中的measureText方法测量字体宽度示例
Feb 02 Javascript
Vue代码整洁之去重方法整理
Aug 06 Javascript
JS中this的4种绑定规则详解
Feb 04 Javascript
Node登录权限验证token验证实现的方法示例
May 25 Javascript
基于javascript原生判断DOM是否加载完毕
Oct 14 Javascript
vue3.0封装轮播图组件的步骤
Mar 04 Vue.js
详解在Vue中通过自定义指令获取dom元素
Mar 04 #Javascript
在javaScript中检测数据类型的几种方式小结
Mar 04 #Javascript
jQuery插件echarts实现的去掉X轴、Y轴和网格线效果示例【附demo源码下载】
Mar 04 #Javascript
jQuery插件echarts实现的循环生成图效果示例【附demo源码下载】
Mar 04 #Javascript
php输出全部gb2312编码内的汉字方法
Mar 04 #Javascript
jQuery插件echarts实现的多柱子柱状图效果示例【附demo源码下载】
Mar 04 #Javascript
jQuery插件Echarts实现的双轴图效果示例【附demo源码下载】
Mar 04 #Javascript
You might like
动态网站web开发 PHP、ASP还是ASP.NET
2006/10/09 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
CI框架支持$_GET的两种实现方法
2016/05/18 PHP
PHPstorm启用自动换行的方法详解(IDE)
2020/09/17 PHP
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
使用window.prompt()实现弹出用户输入的对话框
2015/04/13 Javascript
AngularJS 实现按需异步加载实例代码
2015/10/18 Javascript
AngularJs Scope详解及示例代码
2016/09/01 Javascript
jQuery Validation Engine验证控件调用外部函数验证的方法
2017/01/18 Javascript
jQuery 实现鼠标画框并对框内数据选中的实例代码
2017/08/29 jQuery
JavaScript实现构造json数组的方法分析
2018/08/17 Javascript
JS双向链表实现与使用方法示例(增加一个previous属性实现)
2019/01/31 Javascript
微信小程序实现折线图的示例代码
2019/06/07 Javascript
微信小程序下拉框搜索功能的实现方法
2019/07/31 Javascript
弱类型语言javascript中 a,b 的运算实例小结
2019/08/07 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
[50:15]VP vs Mineski 2018国际邀请赛淘汰赛BO3 第二场 8.22
2018/08/23 DOTA
python中常用的九种预处理方法分享
2016/09/11 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
Python如何进行时间处理
2020/08/06 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
CSS3基础(RGBa、text-shadow、box-shadow、border-radius)
2012/11/13 HTML / CSS
解析浏览器的一些“滚动”行为鉴赏
2019/09/16 HTML / CSS
全球最大的游戏市场:G2A
2018/07/05 全球购物
十一个高级MySql面试题
2014/10/06 面试题
教师思想作风整顿个人剖析材料
2014/10/10 职场文书
2014年学生会主席工作总结
2014/11/07 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
中班下学期个人工作总结
2015/02/12 职场文书
2015年七夕爱情寄语
2015/03/24 职场文书
求职推荐信范文
2015/03/27 职场文书
Pytorch反向传播中的细节-计算梯度时的默认累加操作
2021/06/05 Python
MySQL 字符集 character
2022/05/04 MySQL