用jQuery實(shí)現(xiàn)檢測(cè)瀏覽器及版本的腳本代碼
其一,是使用使用瀏覽器的功能屬性。比如檢測(cè)瀏覽器是否支持 getElementById 方法就可以使用
if (document.getElementById) {
// the method exists, so use it here
} else {
// do something else
}
雖然這樣的檢測(cè)無(wú)法得知用戶(hù)具體使用哪一種瀏覽器,不過(guò)開(kāi)發(fā)者根據(jù)瀏覽器的功能判斷是否兼容自己的代碼是經(jīng)得起考驗(yàn)的。如果關(guān)注瀏覽器的實(shí)際功能而不在乎它的實(shí)際身份,就可以使用這種方法。
其二,就是使用傳統(tǒng)的 user-agent 字符串,這可能是最古老也是最流行的檢測(cè)方式。雖然從技術(shù)角度上說(shuō),用戶(hù)可以更改自己的 user-agent,但是使用它的確能獲得一些有用的信息。
話(huà)說(shuō)到此可能有些偏題。使用過(guò) jQuery 的朋友都知道,使用 jQuery 本身的 brower 方法就可以準(zhǔn)確的判斷用戶(hù)在使用那種瀏覽器甚至是版本。好的開(kāi)發(fā)庫(kù)使用者都想了解其中的一些其實(shí)現(xiàn)機(jī)制,那么,jQuery 是如何做到這些的?
查看 jQuery 最新的源代碼(版本 1.2.2),在第 1195 行至 1205 行,是它的判斷瀏覽器的函數(shù)。正如你所看見(jiàn)的,jQuery 使用的是上述第二種方法,即使用 user-agent 判斷用戶(hù)的瀏覽器和版本。
坦白說(shuō),起先我對(duì)短短的五行代碼就可以判斷瀏覽器的種類(lèi)和版本感到非常的驚奇。在《Javascript 高級(jí)程序設(shè)計(jì)》一書(shū)中,作者甚至使用單獨(dú)的章節(jié)描述的如何使用 Javascript 判斷瀏覽器和操作系統(tǒng)。但通過(guò)閱讀其代碼(其實(shí)并不難),我頓時(shí)有中恍然大悟的感覺(jué)。廢話(huà)不多說(shuō),貼上代碼。
var userAgent = navigator.userAgent.toLowerCase();
// Figure out what browser is being used
jQuery.browser = {
version: (userAgent.match( /.+(?:rv|it|ra|ie)[\/: ]([\d.]+)/ ) || [])[1],
safari: /webkit/.test( userAgent ),
opera: /opera/.test( userAgent ),
msie: /msie/.test( userAgent ) && !/opera/.test( userAgent ),
mozilla: /mozilla/.test(userAgent)&&!/(compatible|webkit)/.test(userAgent)
};
說(shuō)到這里,其實(shí)有經(jīng)驗(yàn)的 Javascript 開(kāi)發(fā)人員已經(jīng)知道了其中的奧秘。是的,jQuery 使用的是正則判斷瀏覽器的種類(lèi)和版本。做得相當(dāng)?shù)钠粒?
首先它將 user-agent 統(tǒng)一成小寫(xiě),然后使用正則逐步的匹配是哪種瀏覽器。有關(guān)正則方面相關(guān)的信息,可以參考這里。不過(guò),有人肯定會(huì)懷疑這樣的判斷是否正確。那么我們先來(lái)看下下面四個(gè)主流瀏覽器的 user-agent:
Safari(Windows edition)
... AppleWebKit/523.12.9 (KHTML, like Gecko) Version/3.0 Safari/523.12.9
Opera(Opera 9.2 on Windows XP)
Opera/9.24 (Windows NT 5.1; U; zh-cn)
Mozilla(Firefox 2.0.11 on Windows XP)
... Windows NT 5.1; zh-CN; rv:1.8.1.11) Gecko/20071127 Firefox/2.0.0.11
Internet Explorer (7.0 on Windows XP)
Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)
jQuery 非常巧妙的使用各瀏覽器各自不同的 user-agent 特性作為判斷。比如 Safari 中 “/webkit/” 是專(zhuān)有的、“/opera/” 也是只有 Opera 瀏覽器特有等等。這種驗(yàn)證方法可以在目前主流的瀏覽器上面,基本都可以準(zhǔn)確判斷。
就在這里打住了,jQuery 的確是非常優(yōu)秀的 Javascript 開(kāi)發(fā)框架之一。掌握它的確可以為自己的開(kāi)發(fā)添加不少的樂(lè)趣。我會(huì)陸續(xù)將自己閱讀 jQuery 框架的心得逐一的發(fā)上來(lái),請(qǐng)大家關(guān)注。
相關(guān)文章
jQuery實(shí)現(xiàn)百葉窗焦點(diǎn)圖動(dòng)畫(huà)效果代碼分享(附源碼下載)
這篇文章主要介紹了jQuery實(shí)現(xiàn)百葉窗焦點(diǎn)圖動(dòng)畫(huà)效果代碼分享(附源碼下載)的相關(guān)資料,需要的朋友可以參考下2016-03-03
表單驗(yàn)證插件Validation應(yīng)用的實(shí)例講解
這篇文章的內(nèi)容是表單驗(yàn)證插件Validation應(yīng)用的實(shí)例講解,需要的朋友可以參考下2015-10-10
淺析jquery與checkbox的checked屬性的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺析jquery與checkbox的checked屬性的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-04-04
jQuery多個(gè)input求和的實(shí)現(xiàn)方法
這篇文章主要介紹了jQuery多個(gè)input求和的實(shí)現(xiàn)方法,涉及jQuery獲取input表單元素值及運(yùn)算的相關(guān)技巧,需要的朋友可以參考下2015-02-02
jQuery控制frames及frame頁(yè)面JS的方法
這篇文章主要介紹了jQuery控制frames及frame頁(yè)面JS的方法,涉及jQuery針對(duì)頁(yè)面元素的判定及frame框架的操作技巧,需要的朋友可以參考下2016-03-03
jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取動(dòng)態(tài)添加的標(biāo)簽對(duì)象,涉及jQuery針對(duì)頁(yè)面元素的動(dòng)態(tài)添加、元素獲取與事件響應(yīng)相關(guān)操作技巧,需要的朋友可以參考下2018-06-06
jquery實(shí)現(xiàn)彈出層遮罩效果的簡(jiǎn)單實(shí)例
這篇文章主要介紹了jquery實(shí)現(xiàn)彈出層遮罩效果的簡(jiǎn)單實(shí)例。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-03-03
使用jQuery實(shí)現(xiàn)下拉框搜索模糊查詢(xún)功能
在web開(kāi)發(fā)中,經(jīng)常會(huì)遇到需要在下拉框中進(jìn)行搜索并進(jìn)行模糊查詢(xún)的需求,jQuery是一個(gè)廣泛應(yīng)用于前端開(kāi)發(fā)的JavaScript庫(kù),可以幫助我們實(shí)現(xiàn)這樣的功能,本文將介紹如何使用jQuery實(shí)現(xiàn)下拉框搜索模糊查詢(xún)功能,需要的朋友可以參考下2024-09-09
jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)手機(jī)發(fā)送驗(yàn)證碼的倒計(jì)時(shí)代碼,需要的朋友可以參考下2014-02-02
jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)表單動(dòng)態(tài)添加數(shù)據(jù)并提交的方法,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)存在form表單的添加、提交,不存在form表單的添加、提交,ajax、非ajax形式提交等數(shù)據(jù)添加與表單提交操作技巧,需要的朋友可以參考下2018-07-07

