JavaScript判断浏览器版本

最新推荐文章于 2023-11-14 11:29:19 发布
最新推荐文章于 2023-11-14 11:29:19 发布
阅读量826 收藏 6
点赞数 3
分类专栏： 浏览器版本判断 文章标签： 浏览器版本判断
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wo_921110/article/details/102832427
版权

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

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");
}

 

不一于汝
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
css中用javascript判断浏览器版本
09-27
看如下的javascript脚本：if (window.XMLHttpRequest) { //Mozilla, Safari,...IE7 alert('Mozilla, Safari,...IE7 ');if(!window.ActiveXObject){ // Mozilla, Safari,... alert('Mozilla, Safari'&#41...
JS 判断当前浏览器是谷歌Google、火狐Firefox、Safari、Edge、Opera还是其他浏览器的方法
huangfuyk.的博客
06-10 4336
JS 判断当前浏览器是谷歌Google、火狐Firefox、Safari、Edge、Opera还是其他浏览器的方法。
js 获取用户当前使用的 浏览器 判断是否谷歌浏览器
左--右
04-26 2845
//判断浏览器 function myBrowser() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf(“Opera”) > -1; if (isOpera) { return “Opera” } ; //判断是否Opera浏览器 if (userAgent.indexOf(“Firefox”) > -1) { return “FF”; } //判断是否Fir
javascript判断是谷歌浏览器还是个人基于谷歌浏览器开发的浏览器
qq_38469220的博客
08-10 572
//方法一；监听window.Notification或者下面的Notification.permission console.log(window.Notification) if(window.Notification == undefined){ console.log('1非正常谷歌浏览器') }else{ console.log('1谷歌浏览器') } ...
js判断各个浏览器的方法
wzy_3463的专栏
07-02 570
var Browser_Name=navigator.appName; var Browser_Agent=navigator.userAgent; var is_IE=(Browser_Name=="Microsoft Internet Explorer");//判读是否为ie浏览器 if(is_IE){ //IE浏览器 }else if(Browser_Agent.indexOf("
JavaScript判断区分谷歌浏览器和360浏览器
最新发布
m0_46318298的博客
11-14 1433
JavaScript判断是否为360浏览器？
CSS布局中可以用javascript判断浏览器版本
10-30
CSS布局中可以用javascript判断浏览器版本 看如下的javascript脚本：
JavaScript判断浏览器版本的方法
12-13
1.当前浏览器是否是谷歌浏览器和确定浏览器浏览器版本号 JavaScript实现： /* 检查浏览器是否为谷歌 */ (function() { //取得浏览器的userAgent字符串 var myBrowser,chromeVersion,version,userAgent = ...
js判断浏览器是否是谷歌浏览器
宇智波鼬的专栏
11-17 8676
有的时候，我们的特殊项目只需要使用谷歌浏览器
js浏览器版本判断
一撇一画的博客
08-17 614
function isIE () { const bw = window.navigator.userAgent // ie版本 10 以下 const compare = (s) => bw.indexOf(s) >= 0 // ie 11 const ie11 = (() => 'ActiveXObject' in window)() return compare('MSIE') || ie11 }
javascript判断chrome浏览器的方法
10-26
主要介绍了javascript判断chrome浏览器的方法，通过userAgent判断检测一下userAgent返回的字符串里面是否包含“Chrome”,需要的朋友可以参考下
JS 获取当前浏览器版本，验证浏览器版本是否高于谷歌80
丶扁扁的糖是扁的 的博客
04-07 2714
原来的在用的方法是直接截取谷歌浏览器版本的前两位版本号，今天突然有用户反馈说报浏览器版本过低，一看发现谷歌浏览器已经发布了100+版本，更换取版本号的逻辑在此记录。 获取浏览器版本信息 const appVersion = navigator.appVersion //获取浏览器版本信息 获取以谷歌浏览器信息开始的字符串 const index = appVersion.indexOf('Chrome/') //谷歌浏览器的版本信息位置 const ChromeStr = app.
如何判断chrome浏览器
qq_38652603的博客
08-12 4619
判断一个浏览器是不是chrome
js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
yushun的博客
01-11 1270
js代码判断浏览器种类IE、FF、Opera、Safari、chrome及版本
判断当前是在ie还是谷歌
m0_48568970的博客
02-16 886
1：在utils建个js文件 export function BrowserType() { var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串 var isOpera = userAgent.indexOf(‘Opera’) > -1 // 判断是否Opera浏览器 var isIE = userAgent.indexOf(‘compatible’) > -1 && userAgent.indexOf(‘MSIE’
JS判断不同的浏览器和版本，提示浏览器版本过低，兼容IE8到IE11
qq1014156094的博客
04-16 2540
产品需求 页面顶部提示用户下载并使用 360 极速浏览器的极速模式，该提示可以手动关闭，兼容 IE8-IE11。 需求由来 项目网站不支持 IE11 及以下，有的人用低版本的浏览器打开页面显示错乱功能无法正常使用。 实现效果 如果不是谷歌内核的浏览器则出现下载提示，如果是谷歌内核的浏览器但内核版本低于 86 的则出现下载提示，最终效果如下图： 不是谷歌内核的浏览器出现的提示 是谷歌内核的浏览器但内核版本低于 86 出现的提示 源码 复制粘贴到 HTML 中即可生效 <script ty
JavaScript判断用户使用的浏览器
weixin_47340917的博客
05-01 1656
JavaScript判断用户使用的浏览器 填坑之判断用户使用设备问题，上篇请看这里如何使用JavaScript来判断用户设备类型。 在这里，我们用到的还是 JavaScript 中的 navigator 对象。因为比较简单，我就直接上代码了。 <script type="text/javascript"> let userBrowser = navigator.userAgent.toLowerCase(); console.log(userBrowser); if
ie浏览器的版本
aochijing0046的博客
12-07 473
原文链接：https://www.cnblogs.com/XCWebLTE/archive/2017/06/15/7017338.html function IEVersion() { var userAgent = navigator.userAgent; //取得浏览器的userAgent字符串 var isIE = userA...
JavaScript怎么判断浏览器是否允许下载文件
08-06
JavaScript不能直接判断浏览器是否允许下载文件，但是可以通过尝试下载文件并监听下载过程的错误事件来间接判断。 以下是一个示例代码： ``` var link = document.createElement('a'); link.style.display = 'none...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值