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 相关文章推荐
鼠标移到导航当前位置的LI变色处于选中状态
Aug 23 Javascript
JavaScript 实现简单的倒计时弹窗DEMO附图
Mar 05 Javascript
快速学习jQuery插件 Form表单插件使用方法
Dec 01 Javascript
JS获取鼠标坐标位置实例分析
Jan 20 Javascript
基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)
Jun 22 Javascript
浅谈EasyUi ComBotree树修改 父节点选择的问题
Nov 07 Javascript
详谈js原型继承的一些问题
Sep 06 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
Nov 17 Javascript
js操作table中tr的顺序实现上移下移一行的效果
Nov 22 Javascript
JS删除String里某个字符的方法
Jan 06 Javascript
如何在vue中使用video.js播放m3u8格式的视频
Feb 01 Vue.js
vue+element ui实现锚点定位
Jun 29 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
php中使用PHPExcel读写excel(xls)文件的方法
2014/09/15 PHP
PHP实现将浏览历史页面网址保存到cookie的方法
2015/01/26 PHP
php pdo oracle中文乱码的快速解决方法
2016/05/16 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
微信公众平台开发教程⑥ 微信开发集成类的使用图文详解
2019/04/10 PHP
jQuery的实现原理的模拟代码 -4 重要的扩展函数 extend
2010/08/03 Javascript
基于jquery的页面划词搜索JS
2010/09/14 Javascript
jQuery使用ajaxSubmit()提交表单示例
2014/04/04 Javascript
jquery css 设置table的奇偶行背景色示例
2014/06/03 Javascript
jQuery满屏焦点图左右滚动特效代码分享
2015/09/07 Javascript
JavaScript与jQuery实现的闪烁输入效果
2016/02/18 Javascript
jQuery操作iframe中js函数的方法小结
2016/07/06 Javascript
js带闹铃功能的倒计时代码
2016/09/29 Javascript
bootstrap datetimepicker日期插件使用方法
2017/01/13 Javascript
详解vue-cli开发环境跨域问题解决方案
2017/06/06 Javascript
Vue.js+Layer表格数据绑定与实现更新的实例
2018/03/07 Javascript
nodejs 简单实现动态html的方法
2018/05/12 NodeJs
vue+SSM实现验证码功能
2018/12/07 Javascript
微信小程序时间控件picker view使用详解
2018/12/28 Javascript
vue基础知识--axios合并请求和slot
2020/06/04 Javascript
JS sort排序详细使用方法示例解析
2020/09/27 Javascript
Python读取excel中的图片完美解决方法
2018/07/27 Python
Django 视图层(view)的使用
2018/11/09 Python
在django中图片上传的格式校验及大小方法
2019/07/28 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
python通过移动端访问查看电脑界面
2020/01/06 Python
Python下利用BeautifulSoup解析HTML的实现
2020/01/17 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
linux面试题参考答案(2)
2015/12/06 面试题
函授本科自我鉴定
2014/02/04 职场文书
小学作文评语大全
2014/04/21 职场文书
2014单位领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
汽车销售助理岗位职责
2015/04/14 职场文书
漂亮妈妈观后感
2015/06/08 职场文书
工作违纪的检讨书范文
2019/07/09 职场文书