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

Question

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

он дал нам статью, чтобы прочитать о них и статья упоминается this site

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

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

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

Answer 1

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

Answer 2

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

Answer 3

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

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 4

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

Answer 5

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

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

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

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

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

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

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

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

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

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

Answer 7

Я создал простой пользовательский агент Firefox Mac Detect, который пишет специальный 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); 
});