這篇文章將為大家詳細講解有關JavaScript如何判斷瀏覽器版本,小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
因為業務需求,項目經理讓我做一個判斷當前瀏覽器是否是谷歌瀏覽器,并確定谷歌瀏覽器版本,不滿足谷歌瀏覽器和版本就顯示一個頁面提示升級,滿足條件就跳轉到我們的一個項目,下面先來實現這個:
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如何判斷瀏覽器版本”這篇文章就分享到這里了,希望以上內容可以對大家有一定的幫助,使各位可以學到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。