DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> 用jQuery實現檢測浏覽器及版本的腳本代碼
用jQuery實現檢測浏覽器及版本的腳本代碼
編輯:JQuery特效代碼     
如何用 Javascript 檢測浏覽器似乎是老生常談的問題。根據本人的經驗,使用 Javascript 檢測浏覽器無非使用兩大類的方法。

其一,是使用使用浏覽器的功能屬性。比如檢測浏覽器是否支持 getElementById 方法就可以使用

if (document.getElementById) {
// the method exists, so use it here
} else {
// do something else
}

雖然這樣的檢測無法得知用戶具體使用哪一種浏覽器,不過開發者根據浏覽器的功能判斷是否兼容自己的代碼是經得起考驗的。如果關注浏覽器的實際功能而不在乎它的實際身份,就可以使用這種方法。

其二,就是使用傳統的 user-agent 字符串,這可能是最古老也是最流行的檢測方式。雖然從技術角度上說,用戶可以更改自己的 user-agent,但是使用它的確能獲得一些有用的信息。

話說到此可能有些偏題。使用過 jQuery 的朋友都知道,使用 jQuery 本身的 brower 方法就可以准確的判斷用戶在使用那種浏覽器甚至是版本。好的開發庫使用者都想了解其中的一些其實現機制,那麼,jQuery 是如何做到這些的?

查看 jQuery 最新的源代碼(版本 1.2.2),在第 1195 行至 1205 行,是它的判斷浏覽器的函數。正如你所看見的,jQuery 使用的是上述第二種方法,即使用 user-agent 判斷用戶的浏覽器和版本。

坦白說,起先我對短短的五行代碼就可以判斷浏覽器的種類和版本感到非常的驚奇。在《Javascript 高級程序設計》一書中,作者甚至使用單獨的章節描述的如何使用 Javascript 判斷浏覽器和操作系統。但通過閱讀其代碼(其實並不難),我頓時有中恍然大悟的感覺。廢話不多說,貼上代碼。

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)
};

說到這裡,其實有經驗的 Javascript 開發人員已經知道了其中的奧秘。是的,jQuery 使用的是正則判斷浏覽器的種類和版本。做得相當的漂亮!

首先它將 user-agent 統一成小寫,然後使用正則逐步的匹配是哪種浏覽器。有關正則方面相關的信息,可以參考這裡。不過,有人肯定會懷疑這樣的判斷是否正確。那麼我們先來看下下面四個主流浏覽器的 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/” 是專有的、“/opera/” 也是只有 Opera 浏覽器特有等等。這種驗證方法可以在目前主流的浏覽器上面,基本都可以准確判斷。

就在這裡打住了,jQuery 的確是非常優秀的 Javascript 開發框架之一。掌握它的確可以為自己的開發添加不少的樂趣。我會陸續將自己閱讀 jQuery 框架的心得逐一的發上來,請大家關注。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved