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 相关文章推荐
NODE.JS加密模块CRYPTO常用方法介绍
Jun 05 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
node.js中的fs.lchmod方法使用说明
Dec 16 Javascript
详解Javascript继承的实现
Mar 25 Javascript
vue+iview写个弹框的示例代码
Dec 05 Javascript
vue slots 组件的组合/分发实例
Sep 06 Javascript
react 父子组件之间通讯props
Sep 08 Javascript
js中arguments对象的深入理解
May 14 Javascript
基于JS实现数字动态变化显示效果附源码
Jul 18 Javascript
基于Vue的侧边目录组件的实现
Feb 05 Javascript
JavaScript变量Dom对象的所有属性
Apr 30 Javascript
JavaScript快速调试的两个技巧
Nov 04 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来检测proxy
2006/10/09 PHP
PHP+MYSQL开发工具及资源收藏
2007/01/02 PHP
PHP得到某段时间区间的时间戳 php定时任务
2012/04/12 PHP
解决PHP4.0 和 PHP5.0类构造函数的兼容问题
2013/08/01 PHP
将二维数组转为一维数组的2种方法
2014/05/26 PHP
php实现的数字验证码及数字运算验证码
2015/07/30 PHP
Yii数据模型中rules类验证器用法分析
2016/07/15 PHP
Linux平台php命令行程序处理管道数据的方法
2016/11/10 PHP
Js 弹出框口并返回值的两种常用方法
2010/12/30 Javascript
容易被忽略的JS脚本特性
2011/09/13 Javascript
ajax不执行success回调而是执行了error回调
2012/12/10 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
jQuery热气球动画半透明背景的后台登录界面代码分享
2015/08/28 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JS获取字符对应的ASCII码实例
2017/09/10 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
详解JavaScript基础知识(JSON、Function对象、原型、引用类型)
2018/01/16 Javascript
Vue隐藏显示、只读实例代码
2018/07/18 Javascript
js中arguments对象的深入理解
2019/05/14 Javascript
nuxt配置通过指定IP和端口访问的实现
2020/01/08 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
2021/01/20 Vue.js
Python3.x中自定义比较函数
2015/04/24 Python
Python中django学习心得
2017/12/06 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
使用Python完成15位18位身份证的互转功能
2019/11/06 Python
将python字符串转化成长表达式的函数eval实例
2020/05/11 Python
Origins加拿大官网:雅诗兰黛集团高端植物护肤品牌
2017/11/19 全球购物
护士自荐信范文
2013/12/15 职场文书
会计岗位描述
2014/02/22 职场文书
青蓝工程实施方案
2014/03/27 职场文书
消防工作实施方案
2014/06/09 职场文书
小城镇建设汇报材料
2014/08/16 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
农业生产宣传标语
2014/10/08 职场文书
企业财务管理制度范本
2015/08/04 职场文书