JavaScript判断浏览器版本的方法


Posted in Javascript onNovember 03, 2019

因为业务需求,项目经理让我做一个判断当前浏览器是否是谷歌浏览器,并确定谷歌浏览器版本,不满足谷歌浏览器和版本就显示一个页面提示升级,满足条件就跳转到我们的一个项目,下面先来实现这个:

1.当前浏览器是否是谷歌浏览器和确定浏览器浏览器版本号

JavaScript实现:

/* 检查浏览器是否为谷歌 */
(function() {
 //取得浏览器的userAgent字符串
 var myBrowser,chromeVersion,version,userAgent = navigator.userAgent; 
 var arr = navigator.userAgent.split(' '); 
 for(var i=0;i < arr.length;i++){
 if(/chrome/i.test(arr[i]))
 chromeVersion = arr[i]
 }
 if(chromeVersion){
 version = Number(chromeVersion.split('/')[1].split('.')[0]);
 } else {
 version = false;
 }
 if (userAgent.indexOf("Chrome") > -1 && version >=49) {
 myBrowser = true
 } else {
 myBrowser = false
 }
 if(myBrowser) {
 // 跳转到对应的项目 
 } else {
 var wrap = document.getElementById('wrap'); 
 wrap.style.display = "block" //让元素显示
 }
})();

全部的代码(图片是在网上找的谷歌的图片):

<!DOCTYPE html>
<html>
 <head>
 <title>请升级您的浏览器</title>
 <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
 <!-- IE8/9及以后的版本用最新的引擎渲染网页 -->
 <meta content="IE=edge" http-equiv="X-UA-Compatible">
 <style>
 body{
 font-size: 13px;
 font-family: Georgia,Verdana,sans-serif;
 color: #333;
 padding: 0;
 margin: 0;
 }
 .wrap{
 display:none;
 min-width: 1024px;
 margin: 47px 20px;
 background-color: #ffffff;
 position: relative;
 }
 .wrap .title{
 text-align: center;
 margin: 13px 25px;
 font-weight: bold;
 font-size: 19px;
 }
 .wrap .list{
 width: 100%;
 margin-bottom: 10px;
 }
 .wrap .list .item{
 text-align: center;
 padding: 10px;
 width: 25%;
 }
 .wrap .list .item:hover .link{
 
 }
 .wrap .list .item .link{
 padding-top: 110px;
 padding-bottom: 4px;
 background-position: center top;
 background-repeat: no-repeat;
 display: block;
 text-decoration: none;
 }
 .wrap .list .item .bc{
 background-size: auto 100%;
 background-image: url('./images/google.jpg');
 }
 .wrap .list .name{
 width:100%;
 color: #e25600;
 text-align: center;
 text-decoration: underline;
 font-size: 19px;
 font-family: 'Open Sans',sans-serif;
 font-weight: 300;
 }
 .wrap .list .vendor{
 width:100%;
 font-size: 10px;
 color: #aaa;
 text-align: center;
 display: block;
 margin-top: 5px;
 text-decoration: none;
 }
 .wrap .tag {
 text-align: center;
 margin: 13px 25px;
 font-size: 19px;
 font-family: 'Open Sans',sans-serif;
 font-weight: 300;
 }
 </style>
 </head>
 <body>
 <div class="wrap" id="wrap">
 <p class="title">您的浏览器需要更新,请下载一款免费而优秀的最新版浏览器。</p>
 <table class="list">
 <tr>
  <td class="item">
  <a class="link bc" href="http://www.google.cn/chrome/browser/desktop/index.html" target="_blank"></a>
  <span class="name">Chrome</span>
  <span class="vendor">Google</span>
  </td>
  </tr>
 </table>
 <p class="tag">带来更多安全、极速和乐趣。</p>
 </div>
 <script>
 /* 检查浏览器是否为谷歌 */
 (function() {
 //取得浏览器的userAgent字符串
 var myBrowser,chromeVersion,version,userAgent = navigator.userAgent; 
 var arr = navigator.userAgent.split(' '); 
 for(var i=0;i < arr.length;i++){
 if(/chrome/i.test(arr[i]))
 chromeVersion = arr[i]
 }
 if(chromeVersion){
 version = Number(chromeVersion.split('/')[1].split('.')[0]);
 } else {
 version = false;
 }
 if (userAgent.indexOf("Chrome") > -1 && version >=49) {
 myBrowser = true
 } else {
 myBrowser = false
 }
 if(myBrowser) {
 // 跳转到对应的项目 
 } else {
 var wrap = document.getElementById('wrap'); 
 wrap.style.display = "block" //让元素显示
 }
 })();
 </script>
 </body>
</html>

效果:

 JavaScript判断浏览器版本的方法

2.判断当前浏览器类型

function myBrowser(){
 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
 if (userAgent.indexOf("Opera") > -1) {
 return "Opera"
 }; //判断是否Opera浏览器
 if (userAgent.indexOf("Firefox") > -1) {
 return "FF";
 } //判断是否Firefox浏览器
 if (userAgent.indexOf("Chrome") > -1){
 return "Chrome";
 }
 if (userAgent.indexOf("Safari") > -1) {
 return "Safari";
 } //判断是否Safari浏览器
 if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera)
 {
 return "IE";
 }; //判断是否IE浏览器
}
//以下是调用上面的函数
var nowBrowser = myBrowser();
if ("IE" == nowBrowser) {
 alert("IE");
}
if ("FF" == nowBrowser) {
 alert("Firefox");
}
if ("Chrome" == nowBrowser) {
 alert("Chrome");
}
if ("Opera" == nowBrowser) {
 alert("Opera");
}
if ("Safari" == nowBrowser) {
 alert("Safari");
}

3.判断当前浏览器类型,并考虑IE5.5 6 7 8

function myBrowser(){
 var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串
 var isOpera = userAgent.indexOf("Opera") > -1; //判断是否Opera浏览器
 var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera; //判断是否IE浏览器
 var isFF = userAgent.indexOf("Firefox") > -1; //判断是否Firefox浏览器
 var isSafari = userAgent.indexOf("Safari") > -1; //判断是否Safari浏览器
 if (isIE) {
 var IE5 = IE55 = IE6 = IE7 = IE8 = false;
 var verIE = new RegExp("MSIE (\\d+\\.\\d+);");
 verIE.test(userAgent);
 var fIEVersion = parseFloat(RegExp["$1"]);
 IE55 = fIEVersion == 5.5;
 IE6 = fIEVersion == 6.0;
 IE7 = fIEVersion == 7.0;
 IE8 = fIEVersion == 8.0;
 if (IE55) {
  return "IE55";
 }
 if (IE6) {
  return "IE6";
 }
 if (IE7) {
  return "IE7";
 }
 if (IE8) {
  return "IE8";
 }
 }//isIE end
 if (isFF) {
 return "FF";
 }
 if (isOpera) {
 return "Opera";
 }
}
//以下是调用上面的函数
var nowBrowser = myBrowser()
 
if (nowBrowser == "FF") {
 alert("Firefox");
}
if (nowBrowser == "Opera") {
 alert("Opera");
}
if (nowBrowser == "Safari") {
 alert("Safari");
}
if (nowBrowser == "IE55") {
 alert("IE5.5");
}
if (nowBrowser == "IE6") {
 alert("IE6");
}
if (nowBrowser == "IE7") {
 alert("IE7");
}
if (nowBrowser == "IE8") {
 alert("IE8");
}

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

Javascript 相关文章推荐
asp 的 分词实现代码
May 24 Javascript
利用js获取服务器时间的两个简单方法
Jan 08 Javascript
Chrome扩展页面动态绑定JS事件提示错误
Feb 11 Javascript
js漂浮广告实现代码
Aug 15 Javascript
JQuery自适应窗口大小导航菜单附源码下载
Sep 01 Javascript
js实现网页图片延时加载 提升网页打开速度
Jan 26 Javascript
javascript实现dom元素可拖动
Mar 21 Javascript
Bootstrap页面布局基础知识全面解析
Jun 13 Javascript
jQuery基于ajax方式实现用户名存在性检查功能示例
Feb 10 Javascript
15分钟学会vue项目改造成SSR(小白教程)
Dec 17 Javascript
js实现滑动滑块验证登录
Jul 24 Javascript
JS highcharts实现动态曲线代码示例
Oct 16 Javascript
JavaScript算法学习之冒泡排序和选择排序
Nov 02 #Javascript
如何正确理解vue中的key详解
Nov 02 #Javascript
Javascript 关于基本类型和引用类型的个人理解
Nov 01 #Javascript
javascript 关于赋值、浅拷贝、深拷贝的个人理解
Nov 01 #Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
Nov 01 #Javascript
解决vue项目刷新后,导航菜单高亮显示的位置不对问题
Nov 01 #Javascript
vue实现点击追加选中样式效果
Nov 01 #Javascript
You might like
PHP新手NOTICE错误常见解决方法
2011/12/07 PHP
关于使用runtimeStyle属性问题讨论文章
2007/03/08 Javascript
js中if语句的几种优化代码写法
2011/03/12 Javascript
分享14个很酷的jQuery导航菜单插件
2011/04/25 Javascript
实用的JS正则表达式(手机号码/IP正则/邮编正则/电话等)
2013/01/11 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
javascript验证身份证号
2015/03/03 Javascript
javascript中使用正则表达式清理table样式的代码
2020/04/01 Javascript
JavaScript异步上传图片文件的实例代码
2017/07/04 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
深入理解React Native原生模块与JS模块通信的几种方式
2017/07/24 Javascript
JS加密插件CryptoJS实现AES加密操作示例
2018/08/16 Javascript
微信小程序视图容器(swiper)组件创建轮播图
2020/06/19 Javascript
JS块级作用域和私有变量实例分析
2019/05/11 Javascript
vue缓存之keep-alive的理解和应用详解
2020/11/02 Javascript
Python获取当前时间的方法
2014/01/14 Python
Python unittest单元测试框架总结
2018/09/08 Python
python实现桌面壁纸切换功能
2019/01/21 Python
详解用python写网络爬虫-爬取新浪微博评论
2019/05/10 Python
python实现邮件发送功能
2019/08/10 Python
python脚本执行CMD命令并返回结果的例子
2019/08/14 Python
python 求10个数的平均数实例
2019/12/16 Python
pytorch掉坑记录:model.eval的作用说明
2020/06/23 Python
python 基于DDT实现数据驱动测试
2021/02/18 Python
深入剖析HTML5 内联框架iFrame
2016/05/04 HTML / CSS
美体小铺波兰官方网站:The Body Shop波兰
2019/09/03 全球购物
延安红色之旅心得体会
2014/10/07 职场文书
践行三严三实心得体会
2014/10/13 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
优秀班集体事迹材料
2014/12/25 职场文书
结婚十年感言
2015/07/31 职场文书
90行Python代码开发个人云盘应用
2021/04/20 Python
高端收音机+蓝牙音箱,JBL TUNER FM带收音蓝牙音箱评测
2021/04/24 无线电
redis不能访问本机真实ip地址的解决方案
2021/07/07 Redis
阿里云服务器部署mongodb的详细过程
2021/09/04 MongoDB
Python+OpenCV实现图片中的圆形检测
2022/04/07 Python