JavaScript判断浏览器版本的方法

2024-08-09 22:44:05

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

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>

效果：

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判断浏览器到底是关闭还是刷新(超准确)

本文是小编总结的一些核心内容,个人感觉对大家有所帮助,具体内容请看下文: 页面加载时只执行onload 页面关闭时只执行onunload 页面刷新时先执行onbeforeunload,然后onunload,最后onload. 经过验证我得出的结论是: //对于ie,谷歌,360: //页面加载时只执行onload //页面刷新时,刷新之前执行onbeforeunload事件,在新页面即将替换旧页面时onunload事件,最后onload事件. //页面关闭时,先onbeforeunload事件,
JS如何判断是否为ie浏览器的方法(包括IE10、IE11在内)

今天在写一个代码复制功能的时候,发现的这个问题,ie11也不支持document.all,看来以后越来越标准了今天碰到一个奇怪的问题,有一个页面,想指定用IE浏览器打开,在VS开发环境没有问题,但部署到服务器上,即使是用IE打开页面,还是提示"仅支持IE",真是晕啊!! 判断是否IE浏览器用的是window.navigator.userAgent,跟踪这个信息,发现在开发环境,识别为IE10,但访问服务器则识别为IE11,但IE11的userAgent里是没有MSIE标志的,原因就是
JavaScript判断是否是微信浏览器

先给大家说下实现原理根据判断UA中是否有关键字micromessenger,有的话则是微信内置浏览器实现代码如下所示: //判断是否微信登陆 function isWeiXin() { var ua = window.navigator.userAgent.toLowerCase(); console.log(ua);//mozilla/5.0 (iphone; cpu iphone os 9_1 like mac os x) applewebkit/601.1.46 (khtml, lik
JS辨别访问浏览器判断是android还是ios系统

项目中需要扫描二维码之后自动分辨出是android还是ios系统,针对于不同的系统进行不同的下载. <script type="text/javascript"> /* * 智能机浏览器版本信息: * */ var browser = { versions: function() { var u = navigator.userAgent, app = navigator.appVersion; return {//移动终端浏览器版本信息 trident: u.indexO
js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本

因为ie10-ie11的版本问题,不再支持document.all判断,所以ie判断函数要重新写了 function isIE() { //ie? if (!!window.ActiveXObject || "ActiveXObject" in window) return true; else return false; } 第一种,只区分浏览器,不考虑版本复制代码代码如下: function myBrowser(){ var userAgent = navigator.
js判断浏览器版本以及浏览器内核的方法

本文实例讲述了js判断浏览器版本以及浏览器内核的方法.分享给大家供大家参考.具体实现方法如下: js判断是否移动端及浏览器内核 var browser = { versions: function() { var u = navigator.userAgent; return { trident: u.indexOf('Trident') > -1, //IE内核 presto: u.indexOf('Presto') > -1, //opera内核 webKit: u.indexOf('Ap
JS通过分析userAgent属性来判断浏览器的类型及版本

JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一种是通过分析浏览器的userAgent属性来判断的.本文对浏览器各自的userAgent特点做一分析,并给出判断方法: Windows操作系统浏览器系列: IE浏览器系列: 特征表现:均以 "mozilla/" 开头,"msie x.0;" 中的x表示其版本: 判断方
JS判断Android、iOS或浏览器的多种方法(四种方法)

第一种:通过判断浏览器的userAgent,用正则来判断是否是ios和Android客户端. 代码如下: <script type="text/javascript"> var u = navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端 var isiOS = !!u.match(/\(i[^;]+;( U;)?
js如何判断用户是否是用微信浏览器

上周接到个需求,需求是这样的:用户扫一扫二维码会产生一个链接,该链接会向后端发送个请求,返回一个 apk 的下载地址,用户点击下载按钮可以下载此 apk.然后就发生了问题,经过测试,发现用微信扫一扫打开的页面点击下载按钮下载不了 apk,后百度之,原来是微信内置浏览器屏蔽了下载链接,后面和需求方沟通,需求改为如果用户是用微信内置浏览器打开的,则提示用户换一个浏览器打开页面,否则下载不了 apk.那么该如何判断用户是否是用微信浏览器呢? 我们知道 js 可以通过 window.navigator.
js/jquery判断浏览器的方法小结

JS获取浏览器信息浏览器代码名称:navigator.appCodeName 浏览器名称:navigator.appName 浏览器版本号:navigator.appVersion 对Java的支持:navigator.javaEnabled() MIME类型(数组):navigator.mimeTypes 系统平台:navigator.platform 插件(数组):navigator.plugins 用户代理:navigator.userAgent js判断IE浏览器的四种方法: 方法一:

JavaScript判断浏览器版本的方法

相关推荐

随机推荐