在Javascript中进行浏览器检测的最佳方法是什么？

Question

在我的一个Web开发类中,我们要求创建一个脚本来检测NE4,NE6 +,IE4,IE6 +浏览器,它们为每个浏览器显示一个兼容的CSS脚本.

他给了我们一篇文章来阅读这些以及文章中提到的 这个网站

其中一名学生说了这个

javascript兼容性的最佳选择是在您想要执行某些操作时测试浏览器功能.其中一个主要原因是,将来会创建越来越多的浏览器.

现在我的问题是,哪种方式是检测用户浏览器对象检测或使用导航器对象的最佳方法？

Answer 1

检测使用的浏览器的标准方法是检查提供的用户代理.

var BrowserDetect = {
    init: function () {
        this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
        this.version = this.searchVersion(navigator.userAgent)
            || this.searchVersion(navigator.appVersion)
            || "an unknown version";
        this.OS = this.searchString(this.dataOS) || "an unknown OS";
    },
    searchString: function (data) {
        for (var i=0;i<data.length;i++) {
            var dataString = data[i].string;
            var dataProp = data[i].prop;
            this.versionSearchString = data[i].versionSearch || data[i].identity;
            if (dataString) {
                if (dataString.indexOf(data[i].subString) != -1)
                    return data[i].identity;
            }
            else if (dataProp)
                return data[i].identity;
        }
    },
    searchVersion: function (dataString) {
        var index = dataString.indexOf(this.versionSearchString);
        if (index == -1) return;
        return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
    },
    dataBrowser: [
        {
            string: navigator.userAgent,
            subString: "Chrome",
            identity: "Chrome"
        },
        {   string: navigator.userAgent,
            subString: "OmniWeb",
            versionSearch: "OmniWeb/",
            identity: "OmniWeb"
        },
        {
            string: navigator.vendor,
            subString: "Apple",
            identity: "Safari",
            versionSearch: "Version"
        },
        {
            prop: window.opera,
            identity: "Opera"
        },
        {
            string: navigator.vendor,
            subString: "iCab",
            identity: "iCab"
        },
        {
            string: navigator.vendor,
            subString: "KDE",
            identity: "Konqueror"
        },
        {
            string: navigator.userAgent,
            subString: "Firefox",
            identity: "Firefox"
        },
        {
            string: navigator.vendor,
            subString: "Camino",
            identity: "Camino"
        },
        {       // for newer Netscapes (6+)
            string: navigator.userAgent,
            subString: "Netscape",
            identity: "Netscape"
        },
        {
            string: navigator.userAgent,
            subString: "MSIE",
            identity: "Explorer",
            versionSearch: "MSIE"
        },
        {
            string: navigator.userAgent,
            subString: "Gecko",
            identity: "Mozilla",
            versionSearch: "rv"
        },
        {       // for older Netscapes (4-)
            string: navigator.userAgent,
            subString: "Mozilla",
            identity: "Netscape",
            versionSearch: "Mozilla"
        }
    ],
    dataOS : [
        {
            string: navigator.platform,
            subString: "Win",
            identity: "Windows"
        },
        {
            string: navigator.platform,
            subString: "Mac",
            identity: "Mac"
        },
        {
               string: navigator.userAgent,
               subString: "iPhone",
               identity: "iPhone/iPod"
        },
        {
            string: navigator.platform,
            subString: "Linux",
            identity: "Linux"
        }
    ]

};
BrowserDetect.init();

http://www.quirksmode.org/js/detect.html

Answer 2

在我的一个Web开发类中,我们要求创建一个检测NE4,NE6 +,IE4,IE6 +的脚本

你的网络开发课是绝望的,可笑的过时了.

回到Netscape4和IE4是常见浏览器的时代,通常需要嗅探浏览器类型并为它们提供不同的样式表和脚本,因为它们对样式和DHTML功能的支持非常不同.

这些天基线浏览器,你必须担心的最低质量的浏览器,是IE6.几乎没有人使用任何低于此值的东西,因为IE6附带XP并且使用未升级的Win2K和Win9X盒子的情况非常小.当然宇宙中没有人使用IE4或糟糕的Netscape 4; 目前很少有网站可以使用它们.

由于Web标准,您可能想要定位的所有其他浏览器(IE7 +,Firefox2 +,Opera,Safari,Chrome,Konqueror)通常都足够接近兼容性,您很少需要进行大量的浏览器检测.IE6确实需要一些关注,但通常如果你使用标准模式,你可以通过一些CSS黑客(特别是"*html")和一些功能 - 在脚本中嗅探,而不是必须为它提供完全不同的内容.

现在我的问题是,哪种方式是检测用户浏览器对象检测或使用导航器对象的最佳方法？

对象/方法检测.

尽可能避免使用导航器对象; 它通常用于兼容性目的,扫描字符串以尝试计算浏览器名称可能很容易在用户代理字符串中的意外标记上绊倒.

如果您需要专门检测IE6(这是迄今为止最常见的浏览器必须检测并添加变通方法),并且没有合适的功能嗅探方法,最好使用条件编译而不是navigator.userAgent处理.