Как лучше всего выполнять обнаружение браузера в Javascript?
В одном из моих классов веб-разработки нас попросили создать сценарий, который обнаруживает браузеры NE4, NE6 +, IE4, IE6 +, отображающие совместимый сценарий CSS для каждого браузера.
он дал нам статью, чтобы прочитать об этом, и в статье упоминался этот сайт
один из студентов сказал это
Лучший выбор для совместимости с javascript - это проверить возможности браузера, когда вы хотите что-то сделать. Одна из основных причин этого заключается в том, что в будущем будет создаваться все больше и больше браузеров.
Теперь мой вопрос: какой способ лучше всего определить обнаружение объекта браузера пользователя или использование объекта Navigator?
Ответов (8)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();
Лучше всего избегать использования кода, зависящего от браузера, насколько это возможно, но там, где это абсолютно необходимо, используйте проверенный код, написанный людьми, которые знают намного больше, чем вы и я. Я бы предложил JQuery, так как это моя библиотека выбор, но есть много других (популярны YUI, Scriptilicious и т. д.). Google JQuery, чтобы начать. Кроме того, погуглите «Джон Ресиг в Google», чтобы узнать, сможете ли вы найти его выступление, в котором он обсуждает некоторые методы, которые он использует для определения возможностей браузера. Это очень умно, так как адаптируется по мере того, как браузеры исправляют устаревшие проблемы.
то, что устарело в 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
