如何基于js判断浏览器版本


Posted in Javascript onFebruary 20, 2020

这篇文章主要介绍了如何基于js判断浏览器版本,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下

浏览器类型判断

不考虑对 IE9 以下浏览器的判断

function getBrowserType(){
  var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
  var browser='unknown';
  if (userAgent.indexOf("IE")!=-1) {
    browser="IE";
  }else if(userAgent.indexOf('Firefox')!=-1){
    browser="Firefox";
  }else if(userAgent.indexOf('OPR')!=-1){
    browser="Opera";
  }else if(userAgent.indexOf('Chrome')!=-1){
    browser="Chrome";
  }else if(userAgent.indexOf('Safari')!=-1){
    browser="Safari";
  }else if(userAgent.indexOf('Trident')!=-1){
    browser='IE 11';
  }
  return browser;
}

测试

如何基于js判断浏览器版本

判断IE浏览器的版本

包含edge,ie11,10,9,8,7,6,5,4

// 获取IE版本
function IEVersion() {
  // 取得浏览器的userAgent字符串
  var userAgent = navigator.userAgent;
  // 判断是否为小于IE11的浏览器
  var isLessIE11 = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1;
  // 判断是否为IE的Edge浏览器
  var isEdge = userAgent.indexOf('Edge') > -1 && !isLessIE11;
  // 判断是否为IE11浏览器
  var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1;
  if (isLessIE11) {
    var IEReg = new RegExp('MSIE (\\d+\\.\\d+);');
    // 正则表达式匹配浏览器的userAgent字符串中MSIE后的数字部分,,这一步不可省略!!!
    IEReg.test(userAgent);
    // 取正则表达式中第一个小括号里匹配到的值
    var IEVersionNum = parseFloat(RegExp['$1']);
    if (IEVersionNum === 7) {
      // IE7
      return 7
    } else if (IEVersionNum === 8) {
      // IE8
      return 8
    } else if (IEVersionNum === 9) {
      // IE9
      return 9
    } else if (IEVersionNum === 10) {
      // IE10
      return 10
    } else {
      // IE版本<7
      return 6
    }
  } else if (isEdge) {
    // edge
    return 'edge'
  } else if (isIE11) {
    // IE11
    return 11
  } else {
    // 不是ie浏览器
    return -1
  }
}

判断浏览器型号及版本号

function getBroswerAndVersion(){
  var os = navigator.platform; 
  var userAgent = navigator.userAgent; 
  var info = ""; 
  var tempArray = ""; 
  //判断浏览器版本
  var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
  var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
  var isEdge = userAgent.toLowerCase().indexOf("edge") > -1 && !isIE; //判断是否IE的Edge浏览器
  var isIE11 = (userAgent.toLowerCase().indexOf("trident") > -1 && userAgent.indexOf("rv") > -1); 

  if (/[Ff]irefox(\/\d+\.\d+)/.test(userAgent)) { 
    tempArray = /([Ff]irefox)\/(\d+\.\d+)/.exec(userAgent); 
    info += tempArray[1] + tempArray[2]; 
  } else if (isIE) { 

    var version = ""; 
    var reIE = new RegExp("MSIE (\\d+\\.\\d+);"); 
    reIE.test(userAgent); 
    var fIEVersion = parseFloat(RegExp["$1"]); 
    if (fIEVersion == 7) 
    { version = "IE7"; } 
    else if (fIEVersion == 8) 
    { version = "IE8"; } 
    else if (fIEVersion == 9) 
    { version = "IE9"; } 
    else if (fIEVersion == 10) 
    { version = "IE10"; } 
    else 
    { version = "0" } 

    info += version; 

  } else if (isEdge) { 
    info += "Edge"; 
  } else if (isIE11) { 
    info += "IE11"; 
  } else if (/[Cc]hrome\/\d+/.test(userAgent)) { 
    tempArray = /([Cc]hrome)\/(\d+)/.exec(userAgent); 
    info += tempArray[1] + tempArray[2]; 
  } else if (/[Vv]ersion\/\d+\.\d+\.\d+(\.\d)* *[Ss]afari/.test(userAgent)) { 
    tempArray = /[Vv]ersion\/(\d+\.\d+\.\d+)(\.\d)* *([Ss]afari)/.exec(userAgent); 
    info += tempArray[3] + tempArray[1]; 
  } else if (/[Oo]pera.+[Vv]ersion\/\d+\.\d+/.test(userAgent)) { 
    tempArray = /([Oo]pera).+[Vv]ersion\/(\d+)\.\d+/.exec(userAgent); 
    info += tempArray[1] + tempArray[2]; 
  } else { 
    info += "unknown"; 
  } 
  return info;
}

低于IE9版本提醒

<!--[if lte IE 9]>
<script>
  var bro = getBroswerAndVersion();
  if(bro=="IE5" || bro=="IE6" || bro=="IE7" || bro=="IE8" ){
    alert("浏览器版本过低!请升级至IE9以上");
  }
</script>
<![endif]-->

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

Javascript 相关文章推荐
用jscript实现列出安装的软件列表
Jun 18 Javascript
JS实现可展开折叠层的鼠标拖曳效果
Oct 09 Javascript
JavaScript学习笔记之数组随机排序
Mar 23 Javascript
详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
Jan 10 Javascript
原生js实现轮播图
Feb 27 Javascript
bootstrap基本配置_动力节点Java学院整理
Jul 14 Javascript
Angular入口组件(entry component)与声明式组件的区别详解
Apr 09 Javascript
JavaScript实现的拼图算法分析
Feb 13 Javascript
JavaScript迭代器的含义及用法
Jun 21 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
layui 地区三级联动 form select 渲染的实例
Sep 27 Javascript
微信小程序背景音乐开发详解
Dec 12 Javascript
微信小程序webSocket的使用方法
Feb 20 #Javascript
Javascript Worker子线程代码实例
Feb 20 #Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 #Vue.js
Javascript原生ajax请求代码实例
Feb 20 #Javascript
webpack中的模式(mode)使用详解
Feb 20 #Javascript
jquery向后台提交数组的代码分析
Feb 20 #jQuery
koa-passport实现本地验证的方法示例
Feb 20 #Javascript
You might like
浅谈PHP 闭包特性在实际应用中的问题
2009/10/30 PHP
PHP rsa加密解密使用方法
2015/04/27 PHP
joomla数据库操作示例代码
2016/01/06 PHP
Zend Framework入门之环境配置及第一个Hello World示例(附demo源码下载)
2016/03/21 PHP
php readfile()修改文件上传大小设置
2017/08/11 PHP
(推荐一个超好的JS函数库)S.Sams Lifexperience ScriptClassLib
2007/04/29 Javascript
自制基于jQuery的智能提示插件一枚
2011/02/18 Javascript
javascript Array.prototype.slice的使用示例
2013/11/14 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
更快的异步执行(setTimeout多浏览器)
2014/08/12 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
jQuery实现精美的多级下拉菜单特效
2015/03/14 Javascript
在JavaScript中使用NaN值的方法
2015/06/05 Javascript
jQuery实现搜索页面关键字的功能
2017/02/16 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
vue中引用阿里字体图标的方法
2018/02/10 Javascript
async/await地狱该如何避免详解
2018/05/10 Javascript
微信小程序之多列表的显示和隐藏功能【附源码】
2018/08/06 Javascript
ElementUI多个子组件表单的校验管理实现
2019/11/07 Javascript
Vue实现背景更换颜色操作
2020/07/17 Javascript
Nuxt.js的路由跳转操作(页面跳转nuxt-link)
2020/11/06 Javascript
对matplotlib改变colorbar位置和方向的方法详解
2018/12/13 Python
python基于gevent实现并发下载器代码实例
2019/11/01 Python
基于python3的socket聊天编程
2020/02/17 Python
Python 格式化打印json数据方法(展开状态)
2020/02/27 Python
Python selenium页面加载慢超时的解决方案
2020/03/18 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
HTML5 canvas基本绘图之绘制阴影效果
2016/06/27 HTML / CSS
运动鞋中的劳斯莱斯:索康尼(SAUCONY)
2017/08/09 全球购物
北京SQL新华信咨询
2016/09/30 面试题
主管竞聘书范文
2014/03/31 职场文书
英文升职感谢信
2015/01/23 职场文书
离职证明范本
2015/06/12 职场文书
react中的DOM操作实现
2021/06/30 Javascript
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS