更靠谱的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】

更靠谱的js判断浏览器及其版本

标签：

原文地址：http://www.cnblogs.com/lechenging/p/4226494.html