Как лучше всего выполнять обнаружение браузера в Javascript?

В одном из моих классов веб-разработки нас попросили создать сценарий, который обнаруживает браузеры NE4, NE6 +, IE4, IE6 +, отображающие совместимый сценарий CSS для каждого браузера.

он дал нам статью, чтобы прочитать об этом, и в статье упоминался этот сайт

один из студентов сказал это

Лучший выбор для совместимости с javascript - это проверить возможности браузера, когда вы хотите что-то сделать. Одна из основных причин этого заключается в том, что в будущем будет создаваться все больше и больше браузеров.

Теперь мой вопрос: какой способ лучше всего определить обнаружение объекта браузера пользователя или использование объекта Navigator?

Ответов (8)

Вы захотите использовать Conditionizr, в котором есть надежные надстройки для тестирования / обнаружения: http://conditionizr.com

Например:

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

Стандартный способ определить, какой браузер используется, - это проверить предоставленный пользовательский агент.

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

Лучше всего избегать использования кода, зависящего от браузера, насколько это возможно, но там, где это абсолютно необходимо, используйте проверенный код, написанный людьми, которые знают намного больше, чем вы и я. Я бы предложил JQuery, так как это моя библиотека выбор, но есть много других (популярны YUI, Scriptilicious и т. д.). Google JQuery, чтобы начать. Кроме того, погуглите «Джон Ресиг в Google», чтобы узнать, сможете ли вы найти его выступление, в котором он обсуждает некоторые методы, которые он использует для определения возможностей браузера. Это очень умно, так как адаптируется по мере того, как браузеры исправляют устаревшие проблемы.

Лучший способ , чтобы не обнаружить его, но использовать кросс-браузер , совместимый библиотеку как JQuery. У этого также есть много других преимуществ с точки зрения выразительности.

то, что устарело в 1.3.2 jQuery.browser () вернет полезную информацию ... также см. jQuery.support ()

Честно говоря, если вы пытаетесь обнаружить браузер, вы решаете не ту проблему. Я бы посоветовал определять функции, которые вы хотите использовать, и снижать их качество на основе этого. Например, если вам нужно создать 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";

Такой подход позволяет вашим приложениям расти по мере того, как браузеры начинают поддерживать больше функций. Очевидно, что само собой разумеется, что такого рода проверки следует абстрагировать в какой-либо функции, чтобы не засорять ваш код одними и теми же проверками снова и снова.

Однако, если вы можете использовать библиотеку Ajax, такую ​​как JQuery, Prototype, Dojo, YUI и т. Д., Это, вероятно, ваш лучший выбор, поскольку в них уже есть встроенные абстракции.

В одном из моих классов веб-разработки нас попросили создать скрипт, который обнаруживает NE4, NE6 +, IE4, IE6 +.

Ваш класс веб-разработки безнадежно, до смешного устарел.

В те дни, когда Netscape4 и IE4 были обычными браузерами, часто приходилось нюхать тип браузера и предоставлять им разные таблицы стилей и сценарии, потому что их поддержка стилей и функций DHTML была очень разной.

В наши дни базовым браузером, самым низким по качеству, о котором вам нужно беспокоиться, является IE6. Почти никто не использует ничего ниже этого, потому что IE6 поставляется с XP, а использование необновленных Windows 2000 и Win9X исчезающе мало. Конечно, никто во вселенной не использует IE4 или ужасный Netscape 4; очень немногие существующие веб-сайты будут даже работать с ними.

Благодаря веб-стандартам, все другие браузеры, на которые вы, возможно, захотите настроить таргетинг (IE7 +, Firefox2 +, Opera, Safari, Chrome, Konqueror), как правило, достаточно близки к взаимной совместимости, поэтому вам редко потребуется выполнять детальное обнаружение браузера. IE6 требует некоторой осторожности, но, как правило, если вы используете стандартный режим, вы можете обойтись несколькими хитростями CSS (в частности, «* html») и некоторым анализом возможностей в сценариях, вместо того, чтобы обслуживать для него совершенно другой контент.

Теперь мой вопрос: какой способ лучше всего определить обнаружение объекта браузера пользователя или использование объекта Navigator?

Обнаружение объекта / метода.

По возможности избегайте использования объекта навигатора; он часто используется в целях совместимости, и сканирование строк с целью определения имен браузеров может легко обнаружить неожиданные токены в строке пользовательского агента.

В случае, когда вам нужно специально обнаружить IE6 (который, безусловно, является наиболее распространенным браузером, который должен обнаруживать и добавлять обходные пути), и нет подходящего способа сниффинга возможностей, лучше использовать условную компиляцию, чем обработку navigator.userAgent.

Я создал простой пользовательский агент для Firefox для Mac, который записывает определенный CSS. http://www.combsconsulting.com/code-firefox-mac-hack.html