前端開發(fā)過程中瀏覽器版本的兩種判定方法
更新時間:2013年10月30日 17:06:37 作者:
前端開發(fā)過程中經(jīng)常需要判斷瀏覽器的版本,達到同時兼容多個瀏覽器的目的,下面有兩種不錯的常用方法:jquery及HTML中的注釋,喜歡的朋友可以參考下
在網(wǎng)上查找瀏覽器及版本判定方法有好多,此處小弟總結(jié)一二,以節(jié)省大家時間。
1.jquery的方法:
通過正則表達式可判定常用瀏覽器及其版本。
復(fù)制代碼 代碼如下:
<span style="font-size:12px">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;
}
} </span>
此處用到“===”,了解到其與“==”和“=”的關(guān)系
=這個就不多說了,開發(fā)中是給參數(shù)賦值。
== equality 等同,=== identity 恒等。
==, 兩邊值類型不同的時候,要先進行類型轉(zhuǎn)換,再比較。
===,不做類型轉(zhuǎn)換,類型不同的一定不等。
For Example:
如果兩個值類型不同,他們可能相等。根據(jù)下面規(guī)則進行類型轉(zhuǎn)換再比較:
a、如果一個是null、一個是undefined,那么[相等]。
b、如果一個是字符串,一個是數(shù)值,把字符串轉(zhuǎn)換成數(shù)值再進行比較。
c、如果任一值是 true,把它轉(zhuǎn)換成 1 再比較;如果任一值是 false,把它轉(zhuǎn)換成 0 再比較。
d、如果一個是對象,另一個是數(shù)值或字符串,把對象轉(zhuǎn)換成基礎(chǔ)類型的值再比較。對象轉(zhuǎn)換成基礎(chǔ)類型,利用它的toString或者valueOf方法。js核心內(nèi)置類,會嘗試valueOf先于toString;例外的是Date,Date利用的是toString轉(zhuǎn)換。
2.HTML中的注釋方法
(1)HTML中的注釋方法
可使用如下代碼檢測當前IE瀏覽器的版本(注意:在非IE瀏覽器中是看不到效果的),此方法用于IE5及以上版本。
HTML 的注釋格式是 <!-- Comment content --> , IE 對HTML注釋做了一些擴展,使之可以支持條件判斷表達式:
<!--[if expression]> HTML <![endif]--> 當表達式expression 為True 的時候,顯示 HTML 內(nèi)容。
[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里的不等于判斷符相同
例子:
復(fù)制代碼 代碼如下:
<!--[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)應(yīng)該如何應(yīng)用條件注釋
因為IE各版本的瀏覽器對我們制作的WEB標準的頁面解釋不一樣,具體就是對CSS的解釋不同,我們?yōu)榱思嫒葸@些,可運用條件注釋來各自定義,最終達到兼容的目的。
比如: < !–- 默認先調(diào)用css.css樣式表 –->
<link rel="stylesheet" type="text/css" href="css.css" />< !-–[if IE 7]>
<!–- 如果IE瀏覽器版是7,調(diào)用ie7.css樣式表- –>
<link rel="stylesheet" type="text/css" href="ie7.css" />< ![endif]–->
<!–-[if lte IE 6]>
<!–- 如果IE瀏覽器版本小于等于6,調(diào)用ie.css樣式表 -–>
<link rel="stylesheet" type="text/css" href="ie.css" />< ![endif]–> 這其中就區(qū)分了IE7和IE6向下的瀏覽器對CSS的執(zhí)行,達到兼容的目的。同時,首行默認的css.css還能與其他非IE瀏覽器實現(xiàn)兼容。
注意:默認的CSS樣式應(yīng)該位于HTML文檔的首行,進行條件注釋判斷的所有內(nèi)容必須位于該默認樣式之后。 比如如下代碼,在IE瀏覽器下執(zhí)行顯示為紅色,而在非IE瀏覽器下顯示為黑色。如果把條件注釋判斷放在首行,則不能實現(xiàn)。該例題很能說明網(wǎng)頁對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瀏覽器下才能執(zhí)行,這個代碼在非IE瀏覽下非單不是執(zhí)行該條件下的定義,而是當做注釋視而不見。
正常就是默認的樣式,對IE瀏覽器需要特殊處理的,才進行條件注釋。在HTML文件里,而不能在CSS文件中使用。
現(xiàn)在的DWcs4里面,已經(jīng)裝備了這些注釋:在“窗口-->代碼片段-->注釋”里。其他的版本沒太注意到。
此文參考:判斷瀏覽器版本的語句,用于個瀏覽器兼容,js判斷運行jsp頁面的瀏覽器類型以及版本
相關(guān)文章
詳解微信小程序與內(nèi)嵌網(wǎng)頁交互實現(xiàn)支付功能
這篇文章主要介紹了詳解微信小程序與內(nèi)嵌網(wǎng)頁交互實現(xiàn)支付功能,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10JavaScript實現(xiàn)京東購物放大鏡和選項卡效果的方法分析
這篇文章主要介紹了JavaScript實現(xiàn)京東購物放大鏡和選項卡效果的方法,結(jié)合實例形式分析了javascript基于事件響應(yīng)、數(shù)值計算與頁面元素動態(tài)修改實現(xiàn)圖片放大功能以及tab選項卡切換效果相關(guān)操作技巧,需要的朋友可以參考下2018-07-07腳本之家貼圖轉(zhuǎn)換+轉(zhuǎn)貼工具用到的js代碼超級推薦
[紅色]腳本之家貼圖轉(zhuǎn)換+轉(zhuǎn)貼工具用到的js代碼超級推薦...2007-04-04