前端開(kāi)發(fā)過(guò)程中瀏覽器版本的兩種判定方法
在網(wǎng)上查找瀏覽器及版本判定方法有好多,此處小弟總結(jié)一二,以節(jié)省大家時(shí)間。
1.jquery的方法:
通過(guò)正則表達(dá)式可判定常用瀏覽器及其版本。
<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) || [];
//如果需要獲取瀏覽器版本號(hào):match[2]
switch(match[1]){
case "msie": //ie
if (parseInt(match[2]) === 6){ //ie6
alert("ie6");
alert("暫時(shí)不支持IE7.0及以下版本瀏覽器,請(qǐng)升級(jí)您的瀏覽器版本!");
//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)系
=這個(gè)就不多說(shuō)了,開(kāi)發(fā)中是給參數(shù)賦值。
== equality 等同,=== identity 恒等。
==, 兩邊值類(lèi)型不同的時(shí)候,要先進(jìn)行類(lèi)型轉(zhuǎn)換,再比較。
===,不做類(lèi)型轉(zhuǎn)換,類(lèi)型不同的一定不等。
For Example:
如果兩個(gè)值類(lèi)型不同,他們可能相等。根據(jù)下面規(guī)則進(jìn)行類(lèi)型轉(zhuǎn)換再比較:
a、如果一個(gè)是null、一個(gè)是undefined,那么[相等]。
b、如果一個(gè)是字符串,一個(gè)是數(shù)值,把字符串轉(zhuǎn)換成數(shù)值再進(jìn)行比較。
c、如果任一值是 true,把它轉(zhuǎn)換成 1 再比較;如果任一值是 false,把它轉(zhuǎn)換成 0 再比較。
d、如果一個(gè)是對(duì)象,另一個(gè)是數(shù)值或字符串,把對(duì)象轉(zhuǎn)換成基礎(chǔ)類(lèi)型的值再比較。對(duì)象轉(zhuǎn)換成基礎(chǔ)類(lèi)型,利用它的toString或者valueOf方法。js核心內(nèi)置類(lèi),會(huì)嘗試valueOf先于toString;例外的是Date,Date利用的是toString轉(zhuǎn)換。
2.HTML中的注釋方法
(1)HTML中的注釋方法
可使用如下代碼檢測(cè)當(dāng)前IE瀏覽器的版本(注意:在非IE瀏覽器中是看不到效果的),此方法用于IE5及以上版本。
HTML 的注釋格式是 <!-- Comment content --> , IE 對(duì)HTML注釋做了一些擴(kuò)展,使之可以支持條件判斷表達(dá)式:
<!--[if expression]> HTML <![endif]--> 當(dāng)表達(dá)式expression 為T(mén)rue 的時(shí)候,顯示 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的簡(jiǎn)寫(xiě),也就是小于或等于的意思。 lt :就是Less than的簡(jiǎn)寫(xiě),也就是小于的意思。 gte:就是Greater than or equal to的簡(jiǎn)寫(xiě),也就是大于或等于的意思。 gt :就是Greater than的簡(jiǎn)寫(xiě),也就是大于的意思。 ! : 就是不等于的意思,跟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)應(yīng)該如何應(yīng)用條件注釋
因?yàn)镮E各版本的瀏覽器對(duì)我們制作的WEB標(biāo)準(zhǔn)的頁(yè)面解釋不一樣,具體就是對(duì)CSS的解釋不同,我們?yōu)榱思嫒葸@些,可運(yùn)用條件注釋來(lái)各自定義,最終達(dá)到兼容的目的。
比如: < !–- 默認(rèn)先調(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向下的瀏覽器對(duì)CSS的執(zhí)行,達(dá)到兼容的目的。同時(shí),首行默認(rèn)的css.css還能與其他非IE瀏覽器實(shí)現(xiàn)兼容。
注意:默認(rèn)的CSS樣式應(yīng)該位于HTML文檔的首行,進(jìn)行條件注釋判斷的所有內(nèi)容必須位于該默認(rèn)樣式之后。 比如如下代碼,在IE瀏覽器下執(zhí)行顯示為紅色,而在非IE瀏覽器下顯示為黑色。如果把條件注釋判斷放在首行,則不能實(shí)現(xiàn)。該例題很能說(shuō)明網(wǎng)頁(yè)對(duì)IE瀏覽器和非IE瀏覽器間的兼容性問(wèn)題解決。 <style type="text/css"> body{ background-color: #000; } < /style> < !-–[if IE]>
<style type="text/css">body{background-color: #F00;}< /style>< ![endif]–->
同時(shí),有人會(huì)試圖使用<!–-[if !IE]>來(lái)定義非IE瀏覽器下的狀況,但注意:條件注釋只有在IE瀏覽器下才能執(zhí)行,這個(gè)代碼在非IE瀏覽下非單不是執(zhí)行該條件下的定義,而是當(dāng)做注釋視而不見(jiàn)。
正常就是默認(rèn)的樣式,對(duì)IE瀏覽器需要特殊處理的,才進(jìn)行條件注釋。在HTML文件里,而不能在CSS文件中使用。
現(xiàn)在的DWcs4里面,已經(jīng)裝備了這些注釋?zhuān)涸凇按翱?->代碼片段-->注釋”里。其他的版本沒(méi)太注意到。
此文參考:判斷瀏覽器版本的語(yǔ)句,用于個(gè)瀏覽器兼容,js判斷運(yùn)行jsp頁(yè)面的瀏覽器類(lèi)型以及版本
- 前端開(kāi)發(fā)必知的15個(gè)jQuery小技巧
- jQuery前端開(kāi)發(fā)35個(gè)小技巧
- WEB前端開(kāi)發(fā)都應(yīng)知道的jquery小技巧及jquery三個(gè)簡(jiǎn)寫(xiě)
- 關(guān)注jquery技巧提高jquery技能(前端開(kāi)發(fā)必學(xué))
- 使用微信小程序開(kāi)發(fā)前端【快速入門(mén)】
- 前端開(kāi)發(fā)必須知道的JS之閉包及應(yīng)用
- 前端開(kāi)發(fā)必須知道的JS之原型和繼承
- 利用Angularjs和Bootstrap前端開(kāi)發(fā)案例實(shí)戰(zhàn)
- jquery圖片延遲加載 前端開(kāi)發(fā)技能必備系列
- 手機(jī)/移動(dòng)前端開(kāi)發(fā)需要注意的20個(gè)要點(diǎn)
相關(guān)文章
探討js字符串?dāng)?shù)組拼接的性能問(wèn)題
這篇文章主要介紹了有關(guān)js對(duì)字符串?dāng)?shù)組進(jìn)行拼接的性能問(wèn)題,字符串連接一直是js中性能最低的操作之一,應(yīng)該如何解決呢?請(qǐng)參看本文的介紹2014-10-10js如何實(shí)現(xiàn)設(shè)計(jì)模式中的模板方法
都知道在js中如果定義兩個(gè)相同名稱(chēng)的方法,前一個(gè)方法就會(huì)被后一個(gè)方法覆蓋掉,使用此特點(diǎn)就可以實(shí)現(xiàn)模板方法,感興趣的朋友可以了解下本文哈2013-07-07詳解微信小程序與內(nèi)嵌網(wǎng)頁(yè)交互實(shí)現(xiàn)支付功能
這篇文章主要介紹了詳解微信小程序與內(nèi)嵌網(wǎng)頁(yè)交互實(shí)現(xiàn)支付功能,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-10-10JavaScript實(shí)現(xiàn)京東購(gòu)物放大鏡和選項(xiàng)卡效果的方法分析
這篇文章主要介紹了JavaScript實(shí)現(xiàn)京東購(gòu)物放大鏡和選項(xiàng)卡效果的方法,結(jié)合實(shí)例形式分析了javascript基于事件響應(yīng)、數(shù)值計(jì)算與頁(yè)面元素動(dòng)態(tài)修改實(shí)現(xiàn)圖片放大功能以及tab選項(xiàng)卡切換效果相關(guān)操作技巧,需要的朋友可以參考下2018-07-07腳本之家貼圖轉(zhuǎn)換+轉(zhuǎn)貼工具用到的js代碼超級(jí)推薦
[紅色]腳本之家貼圖轉(zhuǎn)換+轉(zhuǎn)貼工具用到的js代碼超級(jí)推薦...2007-04-04JavaScript分頁(yè)功能的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript分頁(yè)功能的實(shí)現(xiàn)方法,涉及javascript操作分頁(yè)的相關(guān)技巧,需要的朋友可以參考下2015-04-04js點(diǎn)擊出現(xiàn)懸浮窗效果不使用JQuery插件
JQuery有很多這樣的插件,但本文的這個(gè)是跟著自己的想法寫(xiě)的,也不知道他人是如何實(shí)現(xiàn)的,感興趣的朋友可以了解下2014-01-01基于JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Vue
這篇文章主要介紹了基于JavaScript實(shí)現(xiàn)一個(gè)簡(jiǎn)單的Vue的方法,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-09-09