Опубликовано автор в категориях Верстальщику.

Наверное я не открою Америку, если скажу, что библиотека jQuery является на сегодняшний день самым популярным фреймворком для быстрого написания ненавязчивого JS. Многие проекты и многие популярные CMS, например, Drupal или WordPress, используют jQuery по умолчанию в ядре. Поэтому, верстальщику веб-страниц крайне желательно знать и уметь использовать, хотя бы, базовые возможности этой библиотеки. Сегодня я расскажу о самом, пожалуй, тривиальном, но при этом весьма часто используемом методе определения браузера с помощью jQuery. Делается это с помощью свойства jQuery.browser

jQuery. является одним из свойств глобальных объектов jQuery. Собственно $.browser или jQuery.browser позволяет определить, какой веб-браузер на данный момент имеет доступ к веб-странице. Это очень полезно, например, если мы хотим передать какие-либо специальные данные для определенного браузера.

jQuery.browser имеет флаги для основных популярных браузеров. Они приведены в списке ниже:

  • webkit (jQuery 1.4 и выше)
  • safari (не рекомендуется, как устаревшее)
  • opera
  • msie
  • mozilla

Использование свойства jQuery.browser

$.browser.webkit
$.browser.safari
$.browser.opera
$.browser.msie
$.browser.mozilla

Если данное выражение возвращает «true», то это означает, что пользователь использует браузер отвечающий флагу в выражении.

Определение версии браузера с использованием JQuery

Для того, чтобы определить не только тип пользовательского агента, но и версию, нужно использовать расширенное свойство jQuery.browser.version. Оно возвращает строку. jQuery.browser.version является одним из свойств глобальный объект JQuery.

Использование jQuery.browser.version

Например, перед нами стоит задача определить Intenet Explorer 6 (не спрашивайте зачем 🙂 ). Для этого нам нужно использовать свойства jQuery.browser и jQuery.browser.version:

if (($.browser.msie) && ($.browser.version == '6.0')) {
alert('Fuck You IE 6');
}

Примечание:
В JQuery API начиная с версии JQuery 1.3, данное свойство считается устаревшим, но его можно использовать так как не планируется его исключение из библиотеки в ближайших версиях. Разработчики сегодня рекомендую использовать набор свойств jQuery.support из глобальных объектов jQuery
Вызов данного свойства вызывает тест технологий которые поддерживает браузер и методом исключения поддержки той или иной особенности можно также определить тип браузера.

Использование jQuery.support

Список тестируемых свойств:

  • boxModel: устанавливается в true, если страница обрабатывается браузером в соответствие с моделью W3C CSS Box Model (в настоящий момент не поддерживается в IE 6 и 7, когда они в режиме Quirks Mode). Пока документ полностью не загружен, данное свойство имеет значение null.
  • cssFloat: устанавливается в true, если style.cssFloat используется для доступа к текущему значению CSS float (в настоящий момент не поддерживается в IE, там используется styleFloat).
  • hrefNormalized: устанавливается в true, если браузер оставляет нетронутыми результаты getAttribute(»href»)(в настоящий момент не поддерживается в IE).
  • htmlSerialize: устанавливается в true, если браузер правильно упорядочивает элементы ссылок, когда используются innerHTML (в настоящий момент не поддерживается в IE).
  • leadingWhitespace: устанавливается в true, если браузер сохраняет пустые места при использовании innerHTML (в настоящий момент не поддерживается в IE 6-8).
  • noCloneEvent: устанавливается в true, если браузер не клонирует обработчики событий, когда клонируются элементы (в настоящий момент не поддерживается в IE).
  • objectAll: устанавливается в true, если выполнение getElementsByTagName(»*») относительно объекта возвращает все дочерние элементы (в настоящий момент не поддерживается в IE 7 и IE 8).
  • opacity: устанавливается в true, если браузер правильно интерпретирует свойство видимости элемента (в настоящий момент не поддерживается в IE, там используются alpha-фильтры).
  • scriptEval: устанавливается в true, если при использовании appendChild/createTextNode для встраивания скриптов они исполняются (в настоящий момент не поддерживается в IE, там используется .text для встраивания исполняемых скриптов).
  • style: устанавливается в true, если функция getAttribute(»style») способна возвращать стиль, указанный элементом (в настоящий момент не поддерживается в IE – там используется cssText).
  • tbody: устанавливается в true, если браузер позволяет создание элементов таблицы без блоков tbody (в настоящий момент не поддерживается в IE, где блоки tbody вставляются автоматически, если их нету в строке, прикрепленной к innerHTML).

Например:

if (jQuery.support.boxModel) {
alert('Your drowser is good!');
}

Данный код скажет пользователю что его браузер в порядке в том случае, если пользователь не использует IE 6-7 в режиме Quirks Mode.

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

P.S.

Сегодня наличие сайта у компании уже не назовешь прихотью, роскошью и даже преимуществом. Жесткая конкуренция в Харькове привела к тому, что создание сайтов стало необходимостью. Посетив webakula.com.ua вы больше узнает о студии «ВебАкула», которая занимается созданием и продвижением сайтов в интернете.

6 комментариев к записи “Как определить тип и версию браузера с использованием JQuery”

  1. Никита

    На сколько я знаю $.browser работает только через плагин, не помню какой именно но дело я с ним имел

    Ответить
  2. Андрей

    В jQuery, начиная с версии 1.9 или 2.0 объект browser является deprecated. Укажите это в статье, пожалуйста.

    Ответить

Оставить комментарий

  • (не будет показан)