如何基于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 相关文章推荐
js获取单选按钮的数据
Nov 27 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
js、jquery图片动画、动态切换示例代码
Jun 03 Javascript
javascript HTML5 Canvas实现圆盘抽奖功能
Apr 11 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
Dec 23 Javascript
javascript常用的设计模式
Feb 09 Javascript
JS跳转手机站url的若干注意事项
Oct 18 Javascript
JavaScript事件发布/订阅模式原理与用法分析
Aug 21 Javascript
微信小程序动态添加view组件的实例代码
May 23 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 Javascript
5种 JavaScript 方式实现数组扁平化
Oct 05 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字符过滤函数去除字符串最后一个逗号(rtrim)
2013/03/26 PHP
php实现json编码的方法
2015/07/30 PHP
求解开jscript.encode代码的asp函数
2007/02/28 Javascript
js removeChild 障眼法 可能出现的错误
2009/10/06 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
JS去除字符串中空格的方法
2017/02/14 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
JS时间控制实现动态效果的实例讲解
2017/07/31 Javascript
react native与webview通信的示例代码
2017/09/25 Javascript
JS使用tofixed与round处理数据四舍五入的区别
2017/10/25 Javascript
vue打包的时候自动将px转成rem的操作方法
2018/06/20 Javascript
详解滑动穿透(锁body)终极探索
2019/04/16 Javascript
javascript随机变色实例代码
2019/10/15 Javascript
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
python通过yield实现数组全排列的方法
2015/03/18 Python
Python selenium 三种等待方式详解(必会)
2016/09/15 Python
Python动刷新抢12306火车票的代码(附源码)
2018/01/24 Python
Python实现的读写json文件功能示例
2018/06/05 Python
python实现Flappy Bird源码
2018/12/24 Python
python绘制地震散点图
2019/06/18 Python
详解Django定时任务模块设计与实践
2019/07/24 Python
Python函数装饰器原理与用法详解
2019/08/16 Python
Python 函数用法简单示例【定义、参数、返回值、函数嵌套】
2019/09/20 Python
Windows系统下pycharm中的pip换源
2020/02/23 Python
利用Python实现某OA系统的自动定位功能
2020/05/27 Python
CSS3结构性伪类选择器九种写法
2012/04/18 HTML / CSS
详解HTML5常用的语义化标签
2019/09/27 HTML / CSS
英国信箱在线鲜花速递公司:Bloom & Wild
2019/03/10 全球购物
出国导师推荐信
2014/01/16 职场文书
餐饮投资计划书
2014/04/25 职场文书
先进个人总结范文
2015/02/15 职场文书
SQL 尚未定义空闲 CPU 条件 - OnIdle 作业计划将不起任何作用
2021/06/30 SQL Server
15个值得收藏的JavaScript函数
2021/09/15 Javascript
动画《新网球王子 U-17 WORLD CUP》希腊队PV公开
2022/04/02 日漫
Java实现经典游戏泡泡堂的示例代码
2022/04/04 Java/Android
Python接口自动化之文件上传/下载接口详解
2022/04/05 Python