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 相关文章推荐
重定向实现代码
Nov 20 Javascript
jquery 弹出登录窗口实现代码
Dec 24 Javascript
javascript与webservice的通信实现代码
Dec 25 Javascript
js中array的sort()方法使用介绍
Feb 20 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
基于Bootstrap实现Material Design风格表单插件 附源码下载
Apr 18 Javascript
Node.js+Express配置入门教程详解
May 19 Javascript
jQuery 全选 全部选 反选 实现代码
Aug 17 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
vue 监听屏幕高度的实例
Sep 05 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
微信jssdk踩坑之签名错误invalid signature
May 19 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
全局记录程序片段的运行时间 正确找到程序逻辑耗时多的断点
2011/01/06 PHP
PHP常用的文件操作函数经典收藏
2013/04/02 PHP
table标签的结构与合并单元格的实现方法
2013/07/24 PHP
PHP使用静态方法的几个注意事项
2014/09/16 PHP
php简单日历函数
2015/10/28 PHP
9个比较实用的php代码片段
2016/03/15 PHP
来自国外的14个图片放大编辑的jQuery插件整理
2010/10/20 Javascript
教您去掉ie网页加载进度条的方法
2010/12/09 Javascript
Jquery 绑定时间实现代码
2011/05/03 Javascript
js调用css属性写法
2013/09/21 Javascript
js获取select默认选中的Option并不是当前选中值
2014/05/07 Javascript
js中的如何定位固定层的位置
2014/06/15 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
JavaScript跳出循环的三种方法(break, return, continue)
2019/07/30 Javascript
Node.js开发之套接字(socket)编程入门示例
2019/11/05 Javascript
Vue中点击active并第一个默认选中功能的实现
2020/02/24 Javascript
基于Echarts图表在div动态切换时不显示的解决方式
2020/07/20 Javascript
[02:25]DOTA2英雄基础教程 虚空假面
2014/01/02 DOTA
python实现类的静态变量用法实例
2015/05/08 Python
Python检测网站链接是否已存在
2016/04/07 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
TensorFlow使用Graph的基本操作的实现
2020/04/22 Python
python3判断IP地址的方法
2021/03/04 Python
HTML5图片层叠的实现示例
2020/07/07 HTML / CSS
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
运动会稿件200字
2014/02/07 职场文书
2014两会学习心得:时代的发展
2014/03/17 职场文书
消防宣传口号
2014/06/16 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
民事调解书范文
2015/05/20 职场文书
新生开学寄语大全
2015/05/28 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
redis 限制内存使用大小的实现
2021/05/08 Redis
Redis如何实现分布式锁
2021/08/23 Redis
Go中使用gjson来操作JSON数据的实现
2022/08/14 Golang