前端開發過程中瀏覽器版本的兩種判定方法_javascript技巧

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

1.jquery的方法：

透過正規表示式可判定常用瀏覽器及其版本。

複製程式碼 程式碼如下:

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("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 的註解格式是 ， IE 對HTML註解做了一些擴展，使之可以支援條件判斷表達式：
當表達式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裡的不等於判斷符相同
範例：

複製程式碼 程式碼如下:

You are using IE 5 (any version).

（2）應該如何應用條件註解

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

例如：











這其中區分了IE7和IE6向下的瀏覽器對CSS的執行，達到相容的目的。同時，首行預設的css.css還能與其他非IE瀏覽器實作相容。

注意：預設的CSS樣式應該位於HTML文件的首行，進行條件註解判斷的所有內容必須位於該預設樣式之後。 例如如下程式碼，在IE瀏覽器下執行顯示為紅色，而在非IE瀏覽器下方顯示為黑色。如果把條件註解判斷放在首行，則無法實現。此範例很能說明網頁對IE瀏覽器和非IE瀏覽器間的兼容性問題解決。