如何基于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活用事件触发对象动作
Aug 10 Javascript
php+js实现倒计时功能
Jun 02 Javascript
针对BootStrap中tabs控件的美化和完善(推荐)
Jul 06 Javascript
JSON 必知必会 观后记
Oct 27 Javascript
jq给页面添加覆盖层遮罩的实例
Feb 16 Javascript
js实现移动端编辑添加地址【模仿京东】
Apr 28 Javascript
详解Angular2响应式表单
Jun 14 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
jquery点击回车键实现登录效果并默认焦点的方法
Mar 09 jQuery
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
vscode下vue项目中eslint的使用方法
Jan 13 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 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
Windows下Apache + PHP SESSION丢失的解决过程全纪录
2015/04/07 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP-CGI远程代码执行漏洞分析与防范
2017/05/07 PHP
php empty 函数判断结果为空但实际值却为非空的原因解析
2018/05/28 PHP
php适配器模式简单应用示例
2019/10/23 PHP
javascript 极速 隐藏/显示万行表格列只需 60毫秒
2009/03/28 Javascript
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
javascript new后的constructor属性
2010/08/05 Javascript
jquery无法设置checkbox选中即没有变成选中状态
2014/03/27 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
JavaScript创建一个object对象并操作对象属性的用法
2015/03/23 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
jQuery实现提示密码强度的代码
2015/07/15 Javascript
jQuery三级下拉列表导航菜单代码分享
2020/04/15 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
2016/06/16 Javascript
JS日程管理插件FullCalendar简单实例
2017/02/07 Javascript
纯JavaScript实现实时反馈系统时间
2017/10/26 Javascript
vue使用 better-scroll的参数和方法详解
2018/01/25 Javascript
jQuery中图片展示插件highslide.js的简单dom
2018/04/22 jQuery
element-ui带输入建议的input框踩坑(输入建议空白以及会闪出上一次的输入建议问题)
2019/01/15 Javascript
Vue开发中遇到的跨域问题及解决方法
2020/02/11 Javascript
python进阶教程之词典、字典、dict
2014/08/29 Python
python实现的希尔排序算法实例
2015/07/01 Python
浅谈Python3实现两个矩形的交并比(IoU)
2020/01/18 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
django修改models重建数据库的操作
2020/03/31 Python
如何用Python编写一个电子考勤系统
2021/02/08 Python
医学护理系毕业生求职信
2013/10/01 职场文书
人力资源部经理的岗位职责
2014/03/04 职场文书
绩效管理实施方案
2014/03/19 职场文书
毕业生自荐信如何写
2014/03/24 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
公司仓库管理制度
2015/08/04 职场文书
TV动画《政宗君的复仇》第二季制作决定PV公布
2022/04/02 日漫
用Python仅20行代码编写一个简单的端口扫描器
2022/04/08 Python