用jQuery實現檢測瀏覽器及版本的腳本代碼
2024-05-06 14:18:26
供稿：網友
如何用 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：
