如何基于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 相关文章推荐
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
jQuery中的ajax async同步和异步详解
Sep 29 Javascript
JavaScript中ES6 Babel正确安装过程
Jul 18 Javascript
node.js中express中间件body-parser的介绍与用法详解
May 23 Javascript
JavaScript Date对象应用实例分享
Oct 30 Javascript
完美解决axios跨域请求出错的问题
Feb 05 Javascript
从零开始搭建webpack+react开发环境的详细步骤
May 18 Javascript
layui中table表头样式修改方法
Aug 15 Javascript
vue-router路由懒加载的实现(解决vue项目首次加载慢)
Aug 28 Javascript
vue h5移动端禁止缩放代码
Oct 28 Javascript
vue 中的 render 函数作用详解
Feb 28 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
thinkphp的c方法使用示例
2014/02/24 PHP
php从完整文件路径中分离文件目录和文件名的方法
2015/03/13 PHP
详解WordPress开发中get_header()获取头部函数的用法
2016/01/08 PHP
yii2局部关闭(开启)csrf的验证的实例代码
2017/07/10 PHP
PHP实现对数字分隔加千分号的方法
2019/03/18 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
jquery foreach使用示例
2013/09/12 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
JS中call/apply、arguments、undefined/null方法详解
2016/02/15 Javascript
jQuery实现的文字hover颜色渐变效果实例
2016/02/20 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
2017/02/09 Javascript
Vue-cli配置打包文件本地使用的教程图解
2018/08/02 Javascript
Vue实现用户自定义字段显示数据的方法
2018/08/28 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
ES6扩展运算符和rest运算符用法实例分析
2020/05/23 Javascript
解决Vue中的生命周期beforeDestory不触发的问题
2020/07/21 Javascript
Vue路由 重定向和别名的区别说明
2020/09/09 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
selenium+python实现自动登录脚本
2018/04/22 Python
使用python采集脚本之家电子书资源并自动下载到本地的实例脚本
2018/10/23 Python
python在TXT文件中按照某一字符串取出该字符串所在的行方法
2018/12/10 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
Python生成器传参数及返回值原理解析
2020/07/22 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
关于HTML5 Placeholder新标签低版本浏览器下不兼容的问题分析及解决办法
2016/01/27 HTML / CSS
荷兰度假屋租赁网站:Aan Zee
2020/02/28 全球购物
爱情保证书范文
2014/02/01 职场文书
讲解员培训方案
2014/05/04 职场文书
模范教师事迹材料
2014/12/16 职场文书
2014年小学辅导员工作总结
2014/12/23 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android