Question

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

他给了我们一篇文章来阅读这些以及提到this site

的文章

其中一名学生说这个

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;目前很少有网站可以使用它们。

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

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

对象/方法检测。

尽可能避免使用导航器对象;它通常用于兼容性目的，扫描字符串以尝试计算浏览器名称可能很容易在用户代理字符串中出现意外令牌。

如果您需要专门检测IE6（这是迄今为止最常见的浏览器必须检测并添加解决方法），并且没有合适的功能嗅探方法，最好使用conditional compilation而不是navigator.userAgent处理。

Answer 3

最好的方法是尽可能避免使用依赖于浏览器的代码，但是在绝对必要的情况下，使用经过验证的代码，这些代码是由比我和我知道得多的人编写的。我建议JQuery，因为那是我选择的图书馆，但有很多其他的（YUI很受欢迎，Scriptilicious也是如此）。 Google JQuery即将开始。此外，google'Google Resig at Google'，看看他是否能找到他所做的演讲，讨论了他用来检测浏览器功能的一些技巧。它非常聪明，因为它适应浏览器修复遗留问题。

Answer 4

在1.3.2 {@ 3}}中弃用将返回有用的信息...另请参阅jQuery.browser()

Answer 5

最佳方式是不检测它，而是使用与jQuery等跨浏览器兼容的库。这在表现力方面也有很多其他优点。

Answer 6

老实说，如果您正在尝试检测浏览器，那么您正在攻击错误的问题。我的建议是检测你想要使用的功能并根据它降级。例如，如果您需要创建XMLHttpRequest，则类似于以下内容的工作方式将起作用：

  var xhr = null;
   if (typeof(XMLHttpRequest) !== 'undefined')
      xhr = new XMLHttpRequest(...);
   else if (typeof(ActiveXObject) !== 'undefined')
      xhr = new ActiveXObject('Microsoft.XMLHTTP');

   if (xhr != null)
      ...do something with it
   else
      throw "No XMLHttpRequest";

此方法允许您的应用程序随着浏览器开始支持更多功能而增长。显然，不言而喻，这些类型的检查应该在一个函数中被抽象出来，以免一次又一次地使用相同的检查来丢弃你的代码。

但是，如果你能够使用像JQuery，Prototype，Dojo，YUI等Ajax库，这可能是你最好的选择，因为他们已经内置了抽象。

Answer 7

我构建了一个简单的Firefox Mac用户代理检测，可以编写特定的CSS。 http://www.combsconsulting.com/code-firefox-mac-hack.html

Answer 8

您需要使用Conditionizr，它具有强大的测试/检测附加功能：http://conditionizr.com

例如：

conditionizr.add('safari', [], function () {
    return /constructor/i.test(window.HTMLElement);
});

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

8 个答案: