排列三字谜

JavaScript判斷瀏覽器類型及版本

2010-08-28 10:56:13來源:西部e網作者:

  JavaScript是前端開發的主要語言,我們可以通過編寫JavaScript程序來判斷瀏覽器的類型及版本。JavaScript判斷瀏覽器類型一般有兩種辦法,一種是根據各種瀏覽器獨有的屬性來分辨,另一種是通過分析瀏覽器的userAgent屬性來判斷的。在許多情況下,值判斷出瀏覽器類型之后,還需判斷瀏覽器版本才能處理兼容性問題,而判斷瀏覽器的版本一般只能通過分析瀏覽器的userAgent才能知道。

  navigator對象

  包含了正在使用的 Navigator 的版本信息。 JavaScript 客戶端運行時刻引擎自動創建 navigator 對象。詳細的介紹可以參照【http://www.itlearner.com/code/js_ref/brow1.htm】,這里只是簡單說下其屬性和方法。

  屬性概覽

  appCodeName 指定瀏覽器的代碼名稱。

  appName 指定瀏覽器的名稱。

  appVersion 指定 Navigator 的版本信息。

  language 標明正在使用的 Navigator 的翻譯語種。

  mimeTypes 客戶端支持的所有 MIME 類型數組。

  platform 標明了 Navigator 編譯適合的機器類型。

  plugins 客戶端已安裝的所有插件數組。

  userAgent 指定了用戶代理頭。

  方法概覽

  javaEnabled 測試是否允許 Java。

  plugins.refresh 使新安裝的插件有效,并可選重新裝入已打開的包含插件的文檔。

  preference 允許一個已標識的腳本獲取并設置特定的 Navigator 參數。

  taintEnabled 指定是否允許數據污點。

  簡單標注一下,判斷瀏覽器的名稱可以根據appName判斷,例如:

  var ie=navigator.appName == “Microsoft Internet Explorer” ? true : false;

  瀏覽器的特征及其userAgent

  關于各種瀏覽器的特征及其userAgent,可以參照【http://www.cnblogs.com/leadzen/archive/2008/09/06/1285764.html】,這篇文章介紹的比較詳細。

  簡單羅列如下:

  IE

  只有IE支持創建ActiveX控件,因此她有一個其他瀏覽器沒有的東西,就是ActiveXObject函數。

  而IE各個版本典型的userAgent如下:

  Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0)

  Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.2)

  Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)

  Mozilla/4.0 (compatible; MSIE 5.0; Windows NT)

  其中,版本號是MSIE之后的數字。

  Firefox

  Firefox中的DOM元素都有一個getBoxObjectFor函數,用來獲取該DOM元素的位置和大小(IE對應的中是getBoundingClientRect函數)。

  這是Firefox獨有的,判斷它即可知道是當前瀏覽器是Firefox。

  Firefox幾個版本的userAgent大致如下:

  Mozilla/5.0 (Windows; U; Windows NT 5.2) Gecko/2008070208 Firefox/3.0.1

  Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070309 Firefox/2.0.0.3

  Mozilla/5.0 (Windows; U; Windows NT 5.1) Gecko/20070803 Firefox/1.5.0.12 其中,版本號是Firefox之后的數字。

  Opera

  Opera提供了專門的瀏覽器標志,就是window.opera屬性。

  Opera典型的userAgent如下:

  Opera/9.27 (Windows NT 5.2; U; zh-cn)

  Opera/8.0 (Macintosh; PPC Mac OS X; U; en)

  Mozilla/5.0 (Macintosh; PPC Mac OS X; U; en) Opera 8.0

  其中,版本號是靠近Opera的數字。

  Safari

  Safari瀏覽器中有一個其他瀏覽器沒有的openDatabase函數,可做為判斷Safari的標志。

  Safari典型的userAgent如下:

  Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Version/3.1 Safari/525.13

  Mozilla/5.0 (iPhone; U; CPU like Mac OS X) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3

  其版本號是Version之后的數字。

  Chrome

  Chrome有一個MessageEvent函數,但Firefox也有。不過,好在Chrome并沒有Firefox的getBoxObjectFor函數,根據這個條件還是可以準確判斷出Chrome瀏覽器的。

  目前,Chrome的userAgent是:

  Mozilla/5.0 (Windows; U; Windows NT 5.2) AppleWebKit/525.13 (KHTML, like Gecko) Chrome/0.2.149.27 Safari/525.13

  其中,版本號在Chrome之后的數字。

  有趣的是,Chrome的userAgent還包含了Safari的特征,也許這就是Chrome可以運行所有Apple瀏覽器應用的基礎吧。

  Navigator

  目前,Navigator的userAgent是:

  Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.12) Gecko/20080219 Firefox/2.0.0.12 Navigator/9.0.0.6

  其中,版本號在Navigator之后的數字。

  通過觀察以上各瀏覽器的差異,可以用JavaScript區分出各瀏覽器的,但沒有判斷是否兼容w3c標準,看了看ExtJs的源代碼,發現其中就有對瀏覽器類型以及版本和操作系統的判斷。

  源碼如下:

  ua = navigator.userAgent.toLowerCase(),

  check = function(r){

  return r.test(ua);

  },

  isStrict = document.compatMode == “CSS1Compat”,

  isOpera = check(/opera/),

  isChrome = check(/chrome/),

  isWebKit = check(/webkit/),

  isSafari = !isChrome && check(/safari/),

  isSafari3 = isSafari && check(/version\/3/),

  isSafari4 = isSafari && check(/version\/4/),

  isIE = !isOpera && check(/msie/),

  isIE7 = isIE && check(/msie 7/),

  isIE8 = isIE && check(/msie 8/),

  isGecko = !isWebKit && check(/gecko/),

  isGecko3 = isGecko && check(/rv:1\.9/),

  isBorderBox = isIE && !isStrict,

  isWindows = check(/windows|win32/),

  isMac = check(/macintosh|mac os x/),

  isAir = check(/adobeair/),

  isLinux = check(/linux/)

  關于document.compatMode

  IE對盒模型的渲染在 Standards Mode和Quirks Mode是有很大差別的,在Standards Mode下對于盒模型的解釋和其他的標準瀏覽器是一樣,但在Quirks Mode模式下則有很大差別,而在不聲明Doctype的情況下,IE默認又是Quirks Mode。所以為兼容性考慮,我們可能需要獲取當前的文檔渲染方式。

  document.compatMode正好派上用場,它有兩種可能的返回值:BackCompat和CSS1Compat,對其解釋如下:

  BackCompat Standards-compliant mode is not switched on. (Quirks Mode)

  CSS1Compat Standards-compliant mode is switched on. (Standards Mode)

  在實際的項目中,我們還需要在獲取瀏覽是否IE,這樣就可以得到IE的渲染模式了。在ExtJs中的代碼:isBorderBox=isIE&&!isStrict。

  當文檔有了標準聲明時, document.compatMode 的值就等于 “CSS1compat”, 因此, 我們可以根據 document.compatMode 的值來判斷文檔是否加了標準聲明

  var height = document.compatMode==”CSS1Compat” ? document.documentElement.clientHeight : document.body.clientHeight;

贊助商鏈接:

排列三字谜 日本av女优百科大全 爆乳av女优那须泽子大玩制服的诱惑 谁有江西麻将群 青海快3 日本三级2017 河北十一选五任五一 sm捆绑俱乐部 卡五星麻将实战讲解 足球比分直播吧 三级片父亲和女儿 广东十一选五官方 av女优丝袜 nba比分188直播 江苏11选5网上购 韩国a片成人下载 今日3d开机号和试