如何基于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 相关文章推荐
点击文章内容处弹出页面代码
Oct 01 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
javascript仿qq界面的折叠菜单实现代码
Dec 12 Javascript
jQuery实现类似淘宝购物车全选状态示例
Jun 26 Javascript
showModelDialog弹出文件下载窗口的使用示例
Nov 19 Javascript
JavaScript实现弹出子窗口并传值给父窗口
Dec 18 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 Javascript
js电话号码验证方法
Sep 28 Javascript
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
Vue + element 实现多选框组并保存已选id集合的示例代码
Jun 03 Javascript
在vs code 中如何创建一个自己的 Vue 模板代码
Nov 10 Javascript
Vue3.0中Ref与Reactive的区别示例详析
Jul 07 Vue.js
微信小程序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
mysql+php分页类(已测)
2008/03/31 PHP
php中url函数介绍及使用示例
2014/02/13 PHP
PHP中cookie和session的区别实例分析
2014/08/28 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
Laravel中Trait的用法实例详解
2016/03/16 PHP
PHP输出图像imagegif、imagejpeg与imagepng函数用法分析
2016/11/14 PHP
Laravel自动生成UUID,从建表到使用详解
2019/10/24 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
jquery ui dialog里调用datepicker的问题
2009/08/06 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
javascript继承机制实例详解
2014/11/20 Javascript
jQuery右下角旋转环状菜单特效代码
2015/08/10 Javascript
jQuery实现多级下拉菜单jDropMenu的方法
2015/08/28 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
jQuery实现限制文本框的输入长度
2017/01/11 Javascript
ES6中class类用法实例浅析
2017/04/06 Javascript
Vue.js框架路由使用方法实例详解
2017/08/25 Javascript
学习Vue组件实例
2018/04/28 Javascript
jquery 遍历hash操作示例【基于ajax交互】
2019/10/12 jQuery
JS面向对象编程——ES6 中class的继承用法详解
2020/03/03 Javascript
[39:08]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第一场 12.12
2020/12/16 DOTA
Python字符串转换成浮点数函数分享
2015/07/24 Python
安装python3的时候就是输入python3死活没有反应的解决方法
2018/01/24 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
python如何修改装饰器中参数
2018/03/20 Python
python  Django中的apps.py的目的是什么
2018/10/15 Python
Python判断一个list中是否包含另一个list全部元素的方法分析
2018/12/24 Python
Python常见数据结构之栈与队列用法示例
2019/01/14 Python
python导入库的具体方法
2020/06/18 Python
video实现有声音自动播放的实现方法
2020/05/20 HTML / CSS
英国时尚服饰电商:Boohoo
2017/10/12 全球购物
Kipling澳洲官网:购买凯浦林包包
2020/12/17 全球购物
生物制药专业求职信
2014/03/11 职场文书
对照检查剖析材料
2014/09/30 职场文书
校园文化艺术节宣传标语
2014/10/09 职场文书
辩护词范文大全
2015/05/21 职场文书