更靠譜的js判斷瀏覽器及其版本

所有的前端開發人員都沒有辦法回避一個問題，那就是瀏覽器版本判斷，當我們無法回避需要進行瀏覽器版本判斷時，前輩們往往會告訴我們，可以判斷 UserAgent這個用來標示瀏覽器的字符串，通過判斷這一字符串的特征來判斷瀏覽器版本。但是現在瀏覽器層出不窮，許多瀏覽器都內置更改 UserAgent的選項，或者專門的插件，使得UserAgent告訴我們的信息越來越不准確。那么什么樣的方式判斷瀏覽器版本才是比較靠譜的呢？查查 瀏覽器廠商提供的文檔，我們不難發現，許多瀏覽器廠商其實為我們內置了專門的標示方法，或者有其非常獨特的DOM對象，利用這些，我們就能精確的判斷瀏覽 器，甚至判斷出版本號呢。下面我們開始演示。我們從簡單的先開始。

1.presto內核（Opera）
opera瀏覽器中有個特有的window.opera對象，通過opera.version()可以直接獲取版本號，這是官方內置方法。

目前對於webkit 內核的 opera 已經沒有這個內置標志了

2.webkit內核（safari、chrome、maxthon3高速模式）
webkit內核的瀏覽器中window對象一下成員以“WebKitXxxxx”開頭，這是其有別於其他瀏覽器內核的獨特特征
        1)safari瀏覽器中，navigator.vendor的值為“Apple Computer, Inc.”
        2)chrome中有兩個特有的對象window.google、window.chrome、window.chromium
        3)maxthon下window.external.mxVersion為版本號

3.Gecko內核（Firefox）
繼承netscape瀏覽器衣缽的Firefox至今依然保留留着window.netscape對象，且navigator.product的值為“Gecko”

4.IE
IE的JScript獨有的條件注釋可以方便的與其他瀏覽器區別開來，document.documentMode可以判斷IE8以上的版本號，I5、E6、7 可根據DOM對象差異來區別。


原理講完，下面寫一個DEMO，用上邊的方法重寫jQuery的$.browser.對象。

 

(function(win, $){

    var doc = win.document,
        nav = win.navigator,
        html = doc.documentElement;

//瀏覽器版本判斷
/*@cc_on @if (@_jscript)
    $.browser = {
        msie: true,
        version: doc.documentMode || (doc.compatMode == "CSS1Compat" ? "XMLHttpRequest" in win ? 7 : 6 : 5)
    };
    nav.language = nav.userLanguage;
@else @*/

    if ( win.opera ) {
        //opera
        $.browser = {
            opera: true,
            version: opera.version()
        };
        nav.language = nav.language.replace(/-[a-z]{2}$/, function(str ) {
            return str.toUpperCase();
        });//20150115 測試只對opera 瀏覽器不起作用，其他的都ok
    } else {
        function browser(name){
            if( !$.browser[name] ) {
                $.browser = {version: true};
                $.browser[name] = true;
            }
        }
        if ( win.netscape && nav.product == "Gecko" ) {
            //firefox
            browser("mozilla");
        } else {
            //webkit
            browser("webkit");
            $.browser.chrome = !!win.chrome;
            $.browser.safari = /^apple\s+/i.test(nav.vendor);
        }
    }

/*@end @*/
})(this, jQuery);

 在加一句：console.log("v"==="\v")

//IE8以下的瀏覽器會返回true;IE9,chrome,firefox會返回false;因為IE8，7，6會把v和\v都編譯為垂直制表符。

自測：目前只有opera 判斷不了，因為現在加入了 webkit 內核的 opera 已經不再具有 window.opera 了，希望大家找到更好的解決判斷瀏覽器類型的辦法！
【來自：http://www.w3cfuns.com/article-2440-1-1.html】