js,jsp--前端開發過程中瀏覽器版本的判定

js,jsp--前端開發過程中瀏覽器及其版本的判定

在網上尋找瀏覽器及版本判定方法有好多，此處小弟總結一二，以節省大家時間。

1.jquery的方法：

通過Regex可判定常用瀏覽器及其版本。

function allinfo(){           var ua = navigator.userAgent;       ua = ua.toLowerCase();       var match = /(webkit)[ \/]([\w.]+)/.exec(ua) ||       /(opera)(?:.*version)?[ \/]([\w.]+)/.exec(ua) ||       /(msie) ([\w.]+)/.exec(ua) ||       !/compatible/.test(ua) && /(mozilla)(?:.*? rv:([\w.]+))?/.exec(ua) || [];      //如果需要擷取瀏覽器版本號碼：match[2]       switch(match[1]){                   case "msie":      //ie               if (parseInt(match[2]) === 6){   //ie6                         alert("ie6");              alert("暫時不支援IE7.0及以下版本瀏覽器，請升級您的瀏覽器版本。");               //document.getElementById("hid").style.display = "none";              // document.getElementById("show").style.display = "block";          //document.getElementById("nosee_b").style.display = "none";          }    else if (parseInt(match[2]) === 7) {   //ie7                       alert("ie7");               //document.getElementById("hid").style.display = "none";                  // document.getElementById("show").style.display = "block";               }    else if (parseInt(match[2]) === 8){    //ie8                      alert("ie8");         }    else if(parseInt(match[2]) === 9){          alert("ie9");           //document.getElementById("hid").style.display = "none";           }      break;                case "webkit":     //safari or chrome                     //alert("safari or chrome");     // document.getElementById("middle").style.display = "none";                       break;                case "opera":      //opera                     alert("opera");                     break;                    case "mozilla":    //Firefox                     alert("Firefox");       //document.getElementById("hid").style.display = "none";                    break;                default:                         break;                   }   }  

 此處用到“===”，瞭解到其與“==”和“=”的關係

=這個就不多說了，開發中是給參數賦值。

== equality 等同，=== identity 恒等。 
==， 兩邊實值型別不同的時候，要先進行類型轉換，再比較。 
===，不做類型轉換，類型不同的一定不等。 

For Example: 
如果兩個實值型別不同，他們可能相等。根據下面規則進行類型轉換再比較： 
   a、如果一個是null、一個是undefined，那麼[相等]。 
   b、如果一個是字串，一個是數值，把字串轉換成數值再進行比較。 
   c、如果任一值是 true，把它轉換成 1 再比較；如果任一值是 false，把它轉換成 0 再比較。 
   d、如果一個是對象，另一個是數值或字串，把對象轉換成基礎類型的值再比較。對象轉換成基礎類型，利用它的toString或者valueOf方法。js核心內建類，會嘗試valueOf先於toString；例外的是Date，Date利用的是toString轉換。

2.HTML中的注釋方法

（1）HTML中的注釋方法 可使用如下代碼檢測當前IE瀏覽器的版本（注意：在非IE瀏覽器中是看不到效果的），此方法用於IE5及以上版本。 HTML 的注釋格式是 <!-- Comment content  --> ， IE 對HTML注釋做了一些擴充，使之可以支援條件判斷運算式： <!--[if expression]> HTML <![endif]-->   當運算式expression 為True 的時候，顯示 HTML 內容。 [if IE]   判斷是否IE [if !IE]  判斷是否不是IE [if lt IE 5.5]  判斷是否是IE5.5 以下版本。  (<) [if lte IE 6]   判斷是否等於IE6 版本或者以下 (<=) [if gt IE 5]  判斷是否IE5以上版本  （> ） [if gte IE 7]  判斷是否 IE7 版本或者以上 [if !(IE 7)] 判斷是否不是IE7 [if (gt IE 5)&(lt IE 7)]   判斷是否大於IE5， 小於IE7 [if (IE 6)|(IE 7)]  判斷是否IE6 或者 IE7
 lte：就是Less than or equal to的簡寫，也就是小於或等於的意思。 lt ：就是Less than的簡寫，也就是小於的意思。 gte：就是Greater than or equal to的簡寫，也就是大於或等於的意思。 gt ：就是Greater than的簡寫，也就是大於的意思。 ! ： 就是不等於的意思，跟javascript裡的不等於判斷符相同
例子：

<!--[if IE]><p>You are using Internet Explorer.</p><![endif]-->  <!--[if IE 7]><p>Welcome to Internet Explorer 7!</p><![endif]-->  <!--[if !(IE 7)]><p>You are not using version 7.</p><![endif]-->  <!--[if gte IE 7]><p>You are using IE 7 or greater.</p><![endif]-->  <!--[if (IE 5)]><p>You are using IE 5 (any version).</p><![endif]-->  <!--[if (gte IE 5.5)&(lt IE 7)]><p>You are using IE 5.5 or IE 6.</p><![endif]-->  <!--[if lt IE 5.5]><p>Please upgrade your version of Internet Explorer.</p><![endif]-->  

（2）應該如何應用條件注釋     

因為IE各版本的瀏覽器對我們製作的WEB標準的頁面解釋不一樣，具體就是對CSS的解釋不同，我們為了相容這些，可運用條件注釋來各自訂，最終達到相容的目的。

比如： < !–- 預設先調用css.css樣式表 –->

<link rel="stylesheet" type="text/css" href="css.css" />< !-–[if IE 7]>

<!–- 如果IE瀏覽器版是7,調用ie7.css樣式表- –>

<link rel="stylesheet" type="text/css" href="ie7.css" />< ![endif]–->

<!–-[if lte IE 6]>

<!–- 如果IE瀏覽器版本小於等於6,調用ie.css樣式表 -–>

<link rel="stylesheet" type="text/css" href="ie.css" />< ![endif]–>    這其中就區分了IE7和IE6向下的瀏覽器對CSS的執行，達到相容的目的。同時，首行預設的css.css還能與其他非IE瀏覽器實現相容。

    注意：預設的CSS樣式應該位於HTML文檔的首行，進行條件注釋判斷的所有內容必須位於該預設樣式之後。     比如如下代碼，在IE瀏覽器下執行顯示為紅色，而在非IE瀏覽器下顯示為黑色。如果把條件注釋判斷放在首行，則不能實現。該例題很能說明網頁對IE瀏覽器和非IE瀏覽器間的相容性問題解決。 <style type="text/css"> body{ background-color: #000; } < /style> < !-–[if IE]>

<style type="text/css">body{background-color: #F00;}< /style>< ![endif]–->

同時，有人會試圖使用<!–-[if !IE]>來定義非IE瀏覽器下的狀況，但注意：條件注釋只有在IE瀏覽器下才能執行，這個代碼在非IE瀏覽下非單不是執行該條件下的定義，而是當做注釋視而不見。

    正常就是預設的樣式，對IE瀏覽器需要特殊處理的，才進行條件注釋。在HTML檔案裡，而不能在CSS檔案中使用。

現在的DWcs4裡面，已經裝備了這些注釋：在“視窗-->程式碼片段-->注釋”裡。其他的版本沒太注意到。

此文參考：jsp中判斷瀏覽器版本的語句，用於個瀏覽器安全色,js判斷運行jsp頁面的瀏覽器類型以及版本