JavaScript判断浏览器版本

迷南。 2023-06-11 15:29 14阅读 0赞

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

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">
        
        <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>

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70][]

2.判断当前浏览器类型

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dvXzkyMTExMA_size_16_color_FFFFFF_t_70]: /images/20230531/50176b1b691c4f6e98bbfeb655c2878d.png