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

Question

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Answer 3

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

Answer 4

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

Answer 5

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

Например:

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

Answer 6

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

Answer 7

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

Answer 8

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