4

In one of my Web Development classes we where asked to create a script that detects NE4,NE6+,IE4,IE6+ Browsers that display a compatable CSS script for each browser.

he gave us an article to read about these and the article mentioned this site

one of the students said this

The best choice for javascript compatibility is to test for browser capabilities when you want to do something. One of the main reasons for this is that in the future, more and more browsers will be created.

Now my questions is this which way is the best way to detect the users browser object detection or using the Navigator Object?

4

8 回答 8

7

The standard way to detect what browser is used is to check the user agent supplied.

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

于 2009-02-26T03:12:07.720 回答
5

在我的一个 Web 开发课程中，我们要求创建一个检测 NE4、NE6+、IE4、IE6+ 的脚本

你的 Web 开发课程已经过时了，可笑可笑。

在 Netscape4 和 IE4 是通用浏览器的时代，通常需要嗅探浏览器类型并为它们提供不同的样式表和脚本，因为它们对样式和 DHTML 特性的支持非常不同。

这些天来，您必须担心的最低质量浏览器的基准浏览器是 IE6。几乎没有人使用比这更低的任何东西，因为 IE6 是随 XP 一起提供的，而使用未升级的 Win2K 和 Win9X 机器的机会微乎其微。当然，世界上没有人在使用 IE4 或糟糕的 Netscape 4。目前很少有网站可以使用它们。

由于 Web 标准，您可能想要定位的所有其他浏览器（IE7+、Firefox2+、Opera、Safari、Chrome、Konqueror）通常都足够接近互兼容性，您几乎不需要做太多的浏览器检测。IE6 确实需要一些注意，但通常如果您使用标准模式，您可以通过一些 CSS hack（特别是“* html”）和脚本中的一些功能嗅探来解决问题，而不必为其提供完全不同的内容。

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

对象/方法检测。

尽可能避免使用导航器对象；它通常出于兼容性目的而存在，并且扫描字符串以尝试找出浏览器名称很容易被用户代理字符串中的意外标记绊倒。

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

于 2009-02-26T11:02:27.043 回答
4

The best way is to avoid using browser dependent code as much as possible, but where absolutely necessary, use code that has been proven correct written by people who know a lot more than you and I. I would suggest JQuery, as that's my library of choice, but there are plenty of others out there (YUI is popular, as is Scriptilicious, etc). Google JQuery to get started. Also, google 'John Resig at Google' to see if you can find a talk he did where he discusses some of the techniques he uses to detect browser capabilities. It's very clever, as it adapts as browsers fix their legacy issues.

于 2009-02-26T03:10:14.683 回答
2

tho deprecated in 1.3.2 jQuery.browser() will return useful info ... also see jQuery.support()

于 2009-02-26T03:12:40.077 回答
1

The best way is to not detect it, but to use a cross-browser-compatible library like jQuery. This also has a lot of other advantages in terms of expressiveness.

于 2009-02-26T03:11:09.690 回答
1

Honestly, if you're trying to detect the browser you're attacking the wrong problem. My advice would be to detect the features that you want to use and degrade based on that. For example, if you need to create an XMLHttpRequest something similar to the following will work:

  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";

This approach allows your applications to grow as the browsers start to support more features. Obviously, it goes without saying that these sorts of checks should be abstracted away in a function somewhere so as not to litter your code with the same checks over and over again.

However, if you're able to use an Ajax library like JQuery, Prototype, Dojo, YUI, etc that's probably your best bet as they already have the abstractions built in.

于 2009-02-26T03:25:19.547 回答
1

我构建了一个简单的 Firefox Mac User Agent Detect 来编写特定的 CSS。 http://www.combsconsulting.com/code-firefox-mac-hack.html

于 2009-09-03T03:24:11.897 回答
1

您需要使用 Conditionizr，它为此提供了强大的测试/检测插件：http ://conditionizr.com

例如：

conditionizr.add('safari', [], function () {
    return /constructor/i.test(window.HTMLElement);
});
于 2014-01-13T13:11:08.550 回答