西西軟件園多重安全檢測下載網站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁編程開發(fā)javascript|JQuery → JS識別各瀏覽器版本完整實例代碼

JS識別各瀏覽器版本完整實例代碼

相關軟件相關文章發(fā)表評論 來源:西西整理時間:2014/5/19 15:06:35字體大。A-A+

作者:西西點擊:772次評論:1次標簽: 瀏覽器

谷歌瀏覽器2017(Chrome)v57.0.2987.19 官方正式版
  • 類型:瀏覽器類大。41.4M語言:中文 評分:9.8
  • 標簽:
立即下載

自昨天發(fā)了各瀏覽器內核介紹的隨筆,就閑不住了,想直接寫個JS來識別用戶所用瀏覽器版本。

寫著寫著卻發(fā)現(xiàn)很多坑爹的地方,比如IE10-的版本是依循常規(guī)只支持attachEvent而不支持addEventListener,但到了IE11,卻反過來只支持addEventListener而不支持attachEvent。光是這一點就可以判斷IE是個大坑,IE11的存在可能會導致之前你寫過的代碼出現(xiàn)錯亂。另如原本可用

var ieVersion = eval("''+/*@cc_on"+" @_jscript_version@*/-0")*1

嗅探腳本來判斷是否IE,如果值非0則表示為IE瀏覽器,但到了IE11,也直接返回0了(即IE11不再識別@cc_on這個IE獨有的條件編譯語句)。。。。

還有就是上篇文章提到的Opera自從去年就拋棄了自家的Presto內核,轉而跟進使用Chrome內核,導致的結果是,新版Opera不再支持window.opera,而且跟隨Chrome瀏覽器支持window.chrome等系列Chrome特性,就連userAgent字樣也去了“opera”并直接套用Chromium/Blink內核的userAgent信息(好事是在尾部還是保留了一句OPR/XX.0)

不過琢磨琢磨,問題總會得到解決的。首先解決下比較容易解決的Firefox,其userAgent信息如下:

對比其它瀏覽器內核的ua信息它獨有“Firefox/XX.0”字樣,故我們可以這樣判斷:

rFirefox = /(firefox)\/([\w.]+)/;
matchBS = rFirefox.exec(ua);if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {    //codes...}

這里還判斷了是否支持window.attachEvent 和 window.chrome、window.opera事件,是為了防止其它非Firefox瀏覽器的偽裝ua信息,但我承認這點很難做到盡善盡美。

接著是Safari,雖然Safari的ua信息含有safari字樣,但由于谷歌的瀏覽器是蘋果瀏覽器內核WebKit的分支,導致Chrome的ua信息也含有safari字樣:

這種情況只能“找不同”了,可以看到Safari的ua信息在“Safari/...”之前連著一個“Version/...”,而Chrome的ua信息是沒有的,所以可以這樣寫:


rSafari = /version\/([\w.]+).*(safari)/;
matchBS = rSafari.exec(ua);if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {     //....}

接著說Chrome和Opera,這里比較頭疼的一點。。。。是Chrome的好基友Opera也開始使用了Chromium或Blink引擎,導致二者ua信息以及對BOM的支持幾乎一致(這不廢話么,內核都一樣了),但還是可以從ua找不同:

于是我們可以這樣寫(注意Opera也要兼顧舊版本,也就是使用Presto內核的情況):


rOpera = /(opera).+version\/([\w.]+)/; 
rNewOpera = /(opr)\/(.+)/;
rChrome = /(chrome)\/([\w.]+)/;
matchBS = rOpera.exec(ua);if ((matchBS != null)&&(!(window.attachEvent))) {               //舊Opera識別return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
}
matchBS = rChrome.exec(ua);                   
if ((matchBS != null)&&(!!(window.chrome))&&(!(window.attachEvent))) {          //Chrome識別
   matchBS2 = rNewOpera.exec(ua);   if(matchBS2 == null)                           //新Opera識別   return { browser : matchBS[1] || "", version : matchBS[2] || "0" };   else   return { browser : "Opera", version : matchBS2[2] || "0" };
}

最后說下IE的識別吧,IE是個大坑(紅框部分是建議用于判斷的地方):

由上圖可知,IE6/7從MSIE版本號直接判斷即可,從IE8開始多了個Trident信息,則IE8-IE11只需判斷Trident版本號。那么我們就可以自行寫兩個判斷,先判斷是否IE——即ua信息是否包含了MSIE信息或者Trident信息(注意IE11已經移除了MSIE信息),接著再判斷是否IE7-或者IE8+ :

rMsie = /(msie\s|trident\/7)([\w.]+)/;
rTrident = /(trident)\/([\w.]+)/;
matchBS = rMsie.exec(ua);if (matchBS != null) {
matchBS2 = rTrident.exec(ua);  if (matchBS2 != null){  switch (matchBS2[2]){  case "4.0": return { browser : "IE", version : "8" };break;  case "5.0": return { browser : "IE", version : "9" };break;  case "6.0": return { browser : "IE", version : "10" };break;  case "7.0": return { browser : "IE", version : "11" };break;  default:return { browser : "IE", version : "undefined" };
  }
  }  else
  return { browser : "IE", version : matchBS[2] || "0" };
}

下面貼下全部代碼,可供參考:

<script type="text/javascript">                var userAgent = navigator.userAgent, 
                rMsie = /(msie\s|trident\/7)([\w.]+)/, 
                rTrident = /(trident)\/([\w.]+)/, 
                rFirefox = /(firefox)\/([\w.]+)/, 
                rOpera = /(opera).+version\/([\w.]+)/, 
                rNewOpera = /(opr)\/(.+)/, 
                rChrome = /(chrome)\/([\w.]+)/, 
                rSafari = /version\/([\w.]+).*(safari)/;                var matchBS,matchBS2;                var browser;                var version;                var ua = userAgent.toLowerCase();                var uaMatch = function(ua) {
                    matchBS = rMsie.exec(ua);                    if (matchBS != null) {
                        matchBS2 = rTrident.exec(ua);                        if (matchBS2 != null){                            switch (matchBS2[2]){                                case "4.0": return { browser : "IE", version : "8" };break;                                case "5.0": return { browser : "IE", version : "9" };break;                                case "6.0": return { browser : "IE", version : "10" };break;                                case "7.0": return { browser : "IE", version : "11" };break;                                default:return { browser : "IE", version : "undefined" };
                            }
                        }                        else
                        return { browser : "IE", version : matchBS[2] || "0" };
                    }
                    matchBS = rFirefox.exec(ua);                    if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {                        return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
                    }
                    matchBS = rOpera.exec(ua);                    if ((matchBS != null)&&(!(window.attachEvent))) {                        return { browser : matchBS[1] || "", version : matchBS[2] || "0" };
                    }
                    matchBS = rChrome.exec(ua);                    if ((matchBS != null)&&(!!(window.chrome))&&(!(window.attachEvent))) {
                        matchBS2 = rNewOpera.exec(ua);                        if(matchBS2 == null)                        return { browser : matchBS[1] || "", version : matchBS[2] || "0" };                        else
                        return { browser : "Opera", version : matchBS2[2] || "0" };
                    }
                    matchBS = rSafari.exec(ua);                    if ((matchBS != null)&&(!(window.attachEvent))&&(!(window.chrome))&&(!(window.opera))) {                        return { browser : matchBS[2] || "", version : matchBS[1] || "0" };
                    }                    if (matchBS != null) {                        return { browser : "undefined", version : " browser" };
                    }
                }                var browserMatch = uaMatch(userAgent.toLowerCase());                if (browserMatch.browser) {
                    browser = browserMatch.browser;
                    version = browserMatch.version;
                }
                document.write(browser+version);        
</script>

不過還是得說,識別各種版本的瀏覽器是項非常麻煩的事情,以上代碼能幫你順利應付大部分的情況,但如果遇到某些特殊情景(比如瀏覽器偽裝ua信息),就無法識別瀏覽器具體版本了。

    火狐瀏覽器
    (87)火狐瀏覽器
    火狐瀏覽器安卓版功能特性快速快速瀏覽從啟動到頁面加載,到平移和縮放,都有超快的瀏覽體驗智能工具欄輕點智能工具欄,即可獲得經常訪問的網站列表,書簽和歷史記錄,點擊訪問,無需輸入便捷簡潔易用標簽頁便于您同時瀏覽多個站點加載項提供無圖閱讀模式,流量受限時啟用也能便捷查看網頁智能同步從任何裝置存取您瀏覽器的歷史紀錄,書簽,密碼,以及開啟的標簽頁閱讀自動將零散的文章組合成美觀易讀的頁面插件提供多種功能插件以豐富您的瀏...更多>>
    ie瀏覽器
    (39)ie瀏覽器
    西西軟件園提供好用的瀏覽器官方下載,包括,瀏覽器真的是越來越強大了,界面極其清爽簡潔新增網頁固定功能智能網址地址欄快速訪問入口獨立標簽頁下載管理器開發(fā)人員工具多功能地址欄加載管理和跟蹤保護功能支持和加速功能。...更多>>
    • ie11 64位 for win7官方正式版

      01-29 / 87.2M

      推薦理由:ie11 win7 64位官方正式版適用于win7 64位的系統(tǒng)。微軟為IE11添加了一些新特性,比如對WebGL的支持,以及對
    • ie瀏覽器(Internet Explorer 11)v1

      01-29 / 28.1M

      推薦理由:微軟Internet Explorer 11今天正式發(fā)布,Windows 7以上版本均可以安裝,而Windows 8.1系統(tǒng)則內置了這一版本
    • IE10 64位版win7 X64官方正式版(IE

      02-26 / 41.7M

      推薦理由:微軟已經正式發(fā)布nternet Explorer 10 for Windows 7,這一版本讓Windows 7用戶等待了好久。之前IE10一直僅
    • IE10(Internet Explorer 10 for Wi

      11-16 / 21.7M

      推薦理由:微軟已經正式發(fā)布nternet Explorer 10 for Windows 7,這一版本讓Windows 7用戶等待了好久。之前IE10一直僅
    • IE10預覽版官方第四版

      02-15 / 19.5M

      推薦理由:IE10平臺預覽版第四版(PP4),使得IE瀏覽器的靈活性得到進一步增強。新版IE10在HTML5技術上帶來了相當大的
    • IE7 for xp /2003V7.0.5730.13官方

      10-30 / 13.7M

      推薦理由:IE7中文版支持中文域名,包含了許多重大安全改進的Internet Explorer 7終于發(fā)布了最新正式版本。微軟通過其
    opera瀏覽器
    (34)opera瀏覽器
    目前市場上的安卓瀏覽器種類繁多,不過有一款瀏覽器卻一直活躍在安卓系統(tǒng)上,那就是歐朋瀏覽器。歐朋瀏覽器是全球最流行的手機瀏覽器的中文版本。歐朋手機瀏覽器基于開發(fā),延續(xù)小巧快速節(jié)省流量的優(yōu)點,同時集成了諸多貼近中國用戶的社會化應用。歐朋瀏覽器最大的特色就是快,與同類產品相比優(yōu)勢比較明顯。體積小,適應性好,同時支持智能非智能手機。歐朋瀏覽器特點歐朋瀏覽器支持智能預讀智能縮放手勢操作,外加時尚個性化的界面...更多>>
    瀏覽器2016
    (24)瀏覽器2016
    西西軟件園強力推薦的瀏覽器下載排行榜產品,目前市場上的瀏覽器產品眾多,大家可能會有選擇性困難,到底哪款瀏覽器速度最快,體驗最好最安全這些都是在使用瀏覽器當中常見的疑問,如何選擇一款最好的瀏覽器,其實最適合的就是最好的。火狐瀏覽器是一個完全開放源代碼,任何人都可以自由參與開發(fā)的,支持多種操作系統(tǒng)的瀏覽器,因為其強大的可定制性和豐富的擴展程序而成為最有個性的瀏覽器.和支持最好,彈窗攔截和更勝一籌,執(zhí)行速度...更多>>
    搜狗瀏覽器
    (76)搜狗瀏覽器
    搜狗瀏覽器是搜狗公司推出的國內首款集高速的內核谷歌瀏覽器內核與兼容的內核微軟瀏覽器內核于一身的雙核高速瀏覽器。最新推出的搜狗高速瀏覽器.正式版具有具有超高速,超兼容,超安全的特點。搜狗瀏覽器還具有擴展功能,涵蓋了從工作學習生活服務系統(tǒng)工具時尚休閑資訊閱讀到影音視頻游戲娛樂大類余款擴展。更有包括登錄助手如意淘微信搖一搖傳圖等特色擴展。搜狗助手搜狗助手是一款用于訂購火車票的助手軟件,能夠減少大家在網上訂...更多>>

    相關評論

    閱讀本文后您有什么感想? 已有人給出評價!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過難過
    • 5 囧
    • 3 圍觀圍觀
    • 2 無聊無聊

    熱門評論

    最新評論

    發(fā)表評論 查看所有評論(1)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字數(shù): 0/500 (您的評論需要經過審核才能顯示)