Как определить браузер js

Обновлено: 03.07.2024

Добро пожаловать в руководство о том, как определить браузер с помощью Javascript. У вас есть скрипты, которые вы хотите запускать только в определенном браузере? Может быть, ограничить некоторые функции, проверить совместимость?

  1. Извлеките информацию из пользовательского агента, проверьте, содержит ли она имя браузера. Например, для проверки браузеров Chrome – if (navigator.userAgent.indexOf("Chrome") != -1)
  2. Используйте библиотеку обнаружения, например Bowser.
  3. Определить префикс поставщика CSS. Проверьте, поддерживает ли браузер WebKit, Moz или MS.
  4. Утиный ввод в браузере – проверьте наличие уникальных функций, которые есть в каждом браузере.

Да, на самом деле не существует фиксированных надежных способов обнаружения браузера. Так как же работает каждый метод и какой из них лучше? Читайте дальше, чтобы узнать!

ⓘ Я включил zip-файл со всем исходным кодом примеров в начале этого руководства, поэтому вам не нужно копировать и вставлять все… Или если вы просто хотите сразу погрузиться.

БЫСТРЫЕ СЛАЙДЫ

СОДЕРЖАНИЕ

СКАЧАТЬ И ПРИМЕЧАНИЯ

Во-первых, вот ссылка для загрузки примера кода, как и было обещано.

БЫСТРЫЕ ЗАМЕЧАНИЯ

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

СКАЧАТЬ ПРИМЕР КОДА

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

ОБНАРУЖЕНИЕ БРАУЗЕРА

Хорошо, теперь давайте начнем со способов определения браузера в Javascript.

СПОСОБ 1) ЧТЕНИЕ АГЕНТА ПОЛЬЗОВАТЕЛЯ

Пользовательский агент — это часть информации, которую браузер отправляет на сервер. Если вам интересно, как это выглядит, вот пример из Google Chrome:

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

СПОСОБ 2) С ИСПОЛЬЗОВАНИЕМ БИБЛИОТЕКИ ОБНАРУЖЕНИЯ

Существует множество библиотек обнаружения, но мы используем ту, которая называется Bowser. Как вы можете видеть, это на самом деле снова полагается на пользовательский агент. Он просто анализирует информацию, чтобы сделать вещи более удобными, но у него та же старая проблема — не совсем надежный.

СПОСОБ 3) ОБНАРУЖЕНИЕ ПРЕФИКСОВ CSS

Спасибо Дэвиду Уолшу за этот фрагмент о том, как определить префикс поставщика:

  • WebKit — для Chrome, Safari, Opera и Edge.
  • Moz – Mozilla Firefox.
  • MS — старый Microsoft Internet Explorer и Edge.
  • O — старые версии Opera.

Так что да, мы можем определить, какой префикс использует браузер, и определить, на каком движке он работает. Хотя это более надежно в том смысле, что пользователи не могут его отключить — Но мы также можем сказать, какой именно браузер.

P.S. В январе 2020 года Edge стал основан на Chromium. В более старых версиях сохраняется MS, но в более поздних версиях используется WebKit.

МЕТОД 4) УТИНЫЙ ПЕЧАТЬ

Спасибо за этот пост в StackOverflow.

ПОЛЕЗНЫЕ ИНФОРМАЦИИ И ССЫЛКИ

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

ПОЛЬЗОВАТЕЛЬСКИЙ АГЕНТ НЕТОЧЕН!

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

КАК ЛУЧШЕ? ОБНАРУЖЕНИЕ ФУНКЦИЙ.

Лично я скажу, что ни один из вышеперечисленных методов обнаружения не является надежным. Если вы пытаетесь обеспечить обратную или кроссплатформенную совместимость, определение браузера не имеет никакого смысла. Вместо этого выполните обнаружение функций. Я лично использую библиотеку под названием Modernizr, и, например, если нам нужно проверить физическое местоположение пользователя через GPS, мы проверяем поддержку API геолокации.

Загрузите настроенную сборку Modernizr, а затем просто включите ее в свой скрипт:

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

ССЫЛКИ И ССЫЛКИ

РУКОВОДСТВО НА ЮТУБЕ

ИНФОГРАФИЧЕСКАЯ Шпаргалка

КОНЕЦ

Спасибо, что прочитали, и мы подошли к концу этого руководства. Я надеюсь, что это помогло вам с вашим проектом, и если вы хотите поделиться чем-либо с этим руководством, пожалуйста, не стесняйтесь комментировать ниже. Удачи и удачного кодирования!

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

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

Примечание. Стоит повторить еще раз: очень редко рекомендуется использовать сниффинг пользовательского агента. Вы почти всегда можете найти лучший, более совместимый способ решения вашей проблемы!

Соображения перед использованием обнаружения браузера

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

Вы пытаетесь обойти конкретную ошибку в какой-либо версии браузера?

Поищите или спросите на профильных форумах: вряд ли вы первый столкнетесь с этой проблемой. Кроме того, эксперты или люди с другой точкой зрения могут подсказать вам, как обойти ошибку. Если проблема кажется необычной, стоит проверить, сообщалось ли об этой ошибке производителю браузера через его систему отслеживания ошибок (Mozilla, WebKit, Blink, Opera). Разработчики браузеров обращают внимание на отчеты об ошибках, и анализ может подсказать другие обходные пути для устранения ошибки.

Вы пытаетесь проверить наличие определенной функции?

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

Вы хотите предоставить различный HTML в зависимости от используемого браузера?

Обычно это плохая практика, но в некоторых случаях это необходимо. В этих случаях вы должны сначала проанализировать свою ситуацию, чтобы убедиться, что это действительно необходимо. Можно ли предотвратить это, добавив несемантические элементы

или элементы? Сложность успешного использования обнаружения пользовательского агента стоит нескольких нарушений чистоты вашего HTML. Кроме того, переосмыслите свой дизайн: можете ли вы использовать прогрессивное улучшение или плавные макеты, чтобы избавиться от необходимости делать это?

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

Если вы хотите избежать использования обнаружения пользовательского агента, у вас есть варианты!

При обнаружении функций вы не пытаетесь выяснить, какой браузер отображает вашу страницу, а вместо этого проверяете, доступна ли конкретная функция, которая вам нужна. Если это не так, вы используете запасной вариант. В тех редких случаях, когда поведение разных браузеров различается, вместо проверки строки пользовательского агента вам следует реализовать тест, чтобы определить, как браузер реализует API, и определить, как его использовать. Пример обнаружения признаков выглядит следующим образом. В 2017 году Chrome отключил экспериментальную поддержку просмотра назад в регулярных выражениях, но ни один другой браузер не поддерживал ее. Итак, вы, возможно, подумали сделать это:

В приведенном выше коде было бы сделано несколько неверных предположений. Во-первых, предполагалось, что все строки пользовательского агента, включающие подстроку "Chrome", относятся к Chrome. Строки UA, как известно, вводят в заблуждение. Затем предполагалось, что функция ретроспективного просмотра всегда будет доступна, если в качестве браузера используется Chrome. Агент может быть более старой версией Chrome, выпущенной до того, как была добавлена ​​поддержка, или (поскольку в то время эта функция была экспериментальной) это может быть более поздняя версия Chrome, в которой она была удалена. Самое главное, предполагалось, что никакие другие браузеры не будут поддерживать эту функцию. Поддержка могла быть добавлена ​​в другие браузеры в любое время, но этот код продолжал бы выбирать второстепенный путь.

Подобных проблем можно избежать, проверив вместо этого поддержку самой функции:

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

Наконец, приведенные выше фрагменты кода вызывают критическую проблему с кросс-браузерным кодированием, которую всегда следует учитывать. Не используйте непреднамеренно тестируемый API в неподдерживаемых браузерах. Это может показаться очевидным и простым, но иногда это не так. Например, в приведенных выше фрагментах кода использование просмотра назад в нотации коротких регулярных выражений (например, /reg/igm) вызовет ошибку анализатора в неподдерживаемых браузерах.Таким образом, в приведенном выше примере вы должны использовать new RegExp("(? Прогрессивное улучшение

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

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

Обнаружение мобильных устройств

Что касается размера экрана, используйте window.innerWidth и window.addEventListener("resize", function()< /*обновить вещи, зависящие от размера экрана*/ >). То, что вы хотите сделать для размера экрана, — это не косая черта информации на меньших экранах. Это будет только раздражать людей, потому что заставит их использовать настольную версию. Вместо этого постарайтесь иметь меньше столбцов информации на более длинной странице на экранах меньшего размера и больше столбцов на более короткой странице на экранах большего размера. Этого эффекта можно легко добиться с помощью гибких блоков CSS, иногда с плавающими элементами в качестве частичного резерва.

Также постарайтесь переместить менее релевантную/важную информацию вниз и осмысленно сгруппировать содержимое страницы. Хотя это не по теме, возможно, следующий подробный пример может дать вам понимание и идеи, которые убедит вас отказаться от прослушивания пользовательского агента. Давайте представим себе страницу, состоящую из блоков информации; каждая коробка посвящена разным породам кошек или породам собак. На каждой коробке есть изображение, обзор и исторический забавный факт. Изображения сохраняются в максимально разумном размере даже на больших экранах. В целях осмысленной группировки контента все боксы для кошек отделены от всех боксов для собак таким образом, чтобы боксы для кошек и собак не смешивались друг с другом. На большом экране это экономит место, чтобы иметь несколько столбцов, чтобы уменьшить пространство, потраченное впустую слева и справа от изображений. Ящики могут быть разделены на несколько столбцов с помощью двух равноправных методов. С этого момента мы будем предполагать, что все ящики для собак находятся в верхней части исходного кода, что все ящики для кошек — в конце исходного кода и что все эти ящики имеют один и тот же родительский элемент. Конечно, есть единственный экземпляр будки для собаки прямо над будкой для кошки. В первом методе используются горизонтальные Flexbox'ы для группировки содержимого таким образом, что при отображении страницы конечному пользователю все ящики с собаками находятся вверху страницы, а все ящики с кошками - внизу страницы. Второй метод использует макет столбца и возмущается всеми собаками слева и всеми кошками справа. Только в этом конкретном сценарии уместно не предоставлять запасной вариант для флексбоксов/многостолбцов, в результате чего в старых браузерах будет один столбец с очень широкими боксами. Также учтите следующее. Если больше людей посещают веб-страницу, чтобы увидеть кошек, то может быть хорошей идеей поместить всех кошек выше в исходном коде, чем собак, чтобы больше людей могли быстрее найти то, что они ищут, на небольших экранах, где контент сворачивается. до одного столбца.

[1] Safari предоставляет два номера версии: один технический в токене Safari/xyz и один удобный для пользователя в токене Version/xyz.

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

Версия браузера

Версия браузера часто, но не всегда, помещается в часть значения токена BrowserName/VersionNumber в строке агента пользователя. Это, конечно, не относится к Internet Explorer (который ставит номер версии сразу после токена MSIE) и к Opera после версии 10, которая добавила токен Version/VersionNumber.

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

Механизм рендеринга

Как было показано ранее, в большинстве случаев лучше всего искать механизм рендеринга. Это поможет не исключать менее известные браузеры. Браузеры, использующие общий механизм рендеринга, будут отображать страницу одинаково: часто справедливо предположить, что то, что работает в одном, будет работать и в другом.

Существует пять основных механизмов визуализации: Trident, Gecko, Presto, Blink и WebKit. Поскольку прослушивание имен механизмов рендеринга является обычным явлением, многие пользовательские агенты добавили другие имена рендеринга для запуска обнаружения. Поэтому важно обращать внимание на то, чтобы не вызывать ложных срабатываний при обнаружении механизма рендеринга.

< td>Internet Explorer поместил этот токен в часть comment строки пользовательского агента
Движок Должен содержать Комментарий
Gecko< /td> Gecko/xyz
WebKit AppleWebKit/xyz Обратите внимание, браузеры WebKit добавляют Строка Gecko, которая может вызвать ложное срабатывание Gecko, если обнаружение не будет тщательным.
Presto Opera/xyz Примечание : Presto больше не используется в сборках браузера Opera >= версии 15 (см. «Blink»)
Trident Trident/xyz
EdgeHTML Edge/xyz Не-Chromium Edge ставит свою версию ядра после токена Edge/, а не версию приложения. Примечание. EdgeHTML больше не используется в сборках браузера Edge >= версии 79 (см. «Blink»).
Blink Chrome/xyz

Версия движка рендеринга

Большинство механизмов визуализации помещают номер версии в токен RenderingEngine/VersionNumber, за исключением Gecko. Gecko помещает номер версии Gecko в часть комментария пользовательского агента после строки rv:. Начиная с Gecko 14 для мобильной версии и Gecko 17 для настольной версии это значение также помещается в токен Gecko/версия (предыдущая версия указывала дату сборки, а затем фиксированную дату, называемую GeckoTrail).

Операционная система указана в большинстве строк агента пользователя (но не в веб-платформах, таких как Firefox OS), но формат сильно различается. Это фиксированная строка между двумя точками с запятой в части комментария пользовательского агента. Эти строки специфичны для каждого браузера. Они указывают ОС, но часто также ее версию и информацию об используемом оборудовании (32- или 64-разрядная версия или Intel/PPC для Mac).

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

Мобильный телефон, планшет или настольный компьютер

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

  • Никогда не предполагайте, что браузер или механизм рендеринга работает только на одном типе устройств. Особенно не устанавливайте разные значения по умолчанию для разных браузеров или механизмов рендеринга.
  • Никогда не используйте токен ОС, чтобы определить, какой браузер используется: мобильный, планшетный или настольный. ОС может работать на нескольких типах устройств (например, Android работает как на планшетах, так и на телефонах).

В следующей таблице приведены сведения о том, как производители браузеров часто указывают, что их браузеры работают на мобильных устройствах:

Браузер Правило Пример
Mozilla (Gecko , Firefox) Мобильный телефон или планшет внутри комментария. Mozilla/5.0 (Android; Mobile; rv:13.0) Gecko/13.0 Firefox/13.0
На основе WebKit (Android, Safari) Токен Mobile Safari вне комментария. Mozilla/5.0 (Linux; U; Android 4.0.3; de- ch; HTC Sensation Build/IML74K) AppleWebKit/534.30 (KHTML, как Gecko) Version/4.0 Mobile Safari/534.30
На основе Blink (Chromium, Google Chrome, Opera 15+ , Edge на Android) Токен Mobile Safari вне комментария. Mozilla/5.0 (Linux; Android 4.4.2); Nexus 5 Build/KOT49H) AppleWebKit/537.36 (KHTML, например Gecko) Chrome/33.0.1750.117 Mobile Safari/537.36 OPR/20.0.1396.72047
Presto-based (Opera 12- ) Токен Opera Mobi/xyz внутри комментария. Opera/9.80 (Android 2.3.3; Linux; Opera Mobi/ADR-1111101157; U; es-ES) Presto/ 2.9.201 Version/11.50
Internet Explorer токен IEMobile/xyz в комментарии. Mozilla/5.0 (совместимый; MSIE 9.0; ОС Windows Phone 7.5; Trident/5.0; IEMobile/9.0)
Edge на Windows 10 Mobile Mobile/xyz и Edge/токены снаружи комментарий. Mozilla/5.0 (Windows Phone 10.0; Android 6.0.1; Xbox; Xbox One) AppleWebKit/537.36 (KHTML, например Gecko) Chrome/58.0.3029.110 Mobile Safari/537.36 Edge/16.16299< /td>

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

Примечание. Если устройство достаточно большое и не помечено как Mobi , вам следует обслуживать свой настольный сайт (который, как рекомендуется, в любом случае должен поддерживать сенсорный ввод, поскольку все больше настольных компьютеров появляются с сенсорными экранами).

Президент WebFX. Билл имеет более чем 25-летний опыт работы в индустрии интернет-маркетинга, специализируясь на SEO, UX, информационной архитектуре, автоматизации маркетинга и многом другом. Опыт Уильяма в области научных вычислений и образование в Шиппенсбурге и Массачусетском технологическом институте послужили основой для MarketingCloudFX и других ключевых проектов исследований и разработок в WebFX.

Если вам действительно нужно это сделать, определить, какой браузер кто-то использует, легко с помощью JavaScript.

Предварительный просмотр изображения браузера демонстрационная страница обнаружения.

В JavaScript есть стандартный объект, называемый навигатором, который содержит данные об используемом браузере.

Предупреждение

Документ.запись

console.log()

Если бы я использовал Internet Explorer 11 в Windows 7, результат был бы таким:

Поэтому, если я хочу работать с информацией или показать ее пользователю, мне нужно сначала проанализировать строку.

Проблема в том, что я крайне и постыдно некомпетентен в регулярных выражениях (помимо многих других вещей), поэтому я рад, что существует библиотека JavaScript Detect.js от Дарси Кларк.

Detect.js сможет преобразовать строковое значение в удобочитаемый и работоспособный объект JavaScript.

Чтобы отобразить имя браузера, версию браузера и операционную систему в нашей консоли, мы можем сделать это следующим образом:

В Firebug я увижу следующее:

Консольный журнал Firebug .

И вот что я увижу в Chrome DevTools на том же компьютере:

console.log( ) Chrome DevTools

Чтобы настроить таргетинг на определенный браузер, вы можете использовать условные операторы.

Например, если вы хотите настроить таргетинг только на настольный Safari, вы можете сделать следующее:

Журнал консоли Chrome DevTools .

Вот таблица всех проанализированных свойств:

< tr> < td>Полная версия устройства < td>device.type
СвойствоОписание
browser.family Имя браузера
browser.name Название и номер версии браузера
browser.version Полная версия браузера
browser.major номер основной версии браузера
browser.minor номер дополнительной версии браузера
browser.patch Номер исправления браузера
device.family Имя устройства
device.name Имя и версия устройства
device.version
device.major Номер основной версии устройства
device.major Младший номер версии устройства
device.patch Номер исправления устройства
Тип устройства (например, «Рабочий стол» или «Мобильный»)
device.manufacturer Производитель устройства
os.family Имя операционной системы
os.name Имя операционной системы полная версия
os.version Полная версия операционной системы
os.major Номер основной версии операционной системы
os.minor Младший номер версии операционной системы
os.patch Номер исправления операционной системы

Примечание. Если какое-либо свойство не может быть проанализировано, его значение будет нулевым или неопределенным. Если вы собираетесь показывать информацию своим пользователям, у вас должны быть условные операторы для null и undefined .

Почему не следует использовать обнаружение браузера JavaScript

Я не рекомендую использовать определение браузера JavaScript.

И вы никогда не должны использовать методы, которые я описал, для чего-либо, что является критически важным.

Обнаружение браузера JavaScript ненадежно

JavaScript может быть отключен пользователем.

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

Распознавание признаков — лучший вариант

Если вы используете обнаружение браузера JavaScript для проверки того, есть ли у пользователя определенные возможности браузера — например, новый HTML5 API, такой как WebRTC или Canvas или что-то еще — гораздо лучше определить в режиме реального времени, есть ли эта возможность доступна.

В приведенной выше таблице поддержки браузеров красный цвет несовместим, а зеленый — совместим.

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

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

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

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

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

Как определить, доступна ли функция WebRTC в браузере?

Ну, мы знаем, что браузер с поддержкой WebRTC должен иметь функцию getUserMedia(), поэтому мы могли проверить, можем ли мы ее вызвать.

Приведенный ниже код проверяет возможности WebRTC клиента и выводит окно с предупреждением, если эта функция доступна. Это заимствовано и адаптировано из MDN:

Используйте библиотеку JavaScript Modernizr для более сложного обнаружения функций браузера.

Единственная причина, которую я могу придумать для обнаружения браузера JavaScript, — это несущественное прогрессивное улучшение. Например, если бы я хотел немного улучшить опыт людей, использующих определенный браузер, то обнаружение браузера JavaScript было бы очень быстрым (и очень грязным) решением.

Объект window.navigator содержит информацию о браузере посетителя.

Навигатор по окнам

Объект window.navigator может быть записан без префикса окна.

  • navigator.appName
  • navigator.appCodeName
  • navigator.platform

Файлы cookie браузера

Пример

Имя браузерного приложения

Свойство appName возвращает имя приложения браузера:

Пример

Как ни странно, «Netscape» — это название приложения для IE11, Chrome, Firefox и Safari.

Кодовое название браузерного приложения

Свойство appCodeName возвращает кодовое имя приложения браузера:

Пример

"Mozilla" – это кодовое название приложений для Chrome, Firefox, IE, Safari и Opera.

Браузерный движок

Свойство product возвращает название продукта движка браузера:

Пример

Не полагайтесь на это. Большинство браузеров возвращает "Gecko" в качестве названия продукта!!

Версия для браузера

Свойство appVersion возвращает информацию о версии браузера:

Пример

Агент браузера

Свойство userAgent возвращает заголовок пользовательского агента, отправленный браузером на сервер:

Пример

Предупреждение.

Информация из объекта навигатора часто может вводить в заблуждение, и ее не следует использовать для определения версий браузера, потому что:

  • Разные браузеры могут использовать одно и то же имя.
  • Данные навигатора могут быть изменены владельцем браузера
  • Некоторые браузеры ошибочно идентифицируют себя, чтобы обойти тесты сайта.
  • Браузеры не могут сообщать о новых операционных системах, выпущенных позже браузера.

Браузерная платформа

Свойство platform возвращает платформу браузера (операционную систему):

Пример

Язык браузера

Свойство language возвращает язык браузера:

Пример

Находится ли браузер в сети?

Свойство onLine возвращает значение true, если браузер находится в сети:

Пример

Включена ли Java?

Метод javaEnabled() возвращает значение true, если Java включен:

Пример

Мы только что запустили
видео W3Schools

ПИКЕР ЦВЕТА

colorpicker

Получите сертификат
пройдя курс
сегодня!

КОД ИГРА

Сообщить об ошибке

Если вы хотите сообщить об ошибке или сделать предложение, не стесняйтесь отправить нам электронное письмо:

Спасибо за помощь!

Ваше сообщение было отправлено в W3Schools.

Лучшие учебные пособия
Лучшие ссылки
Лучшие примеры
Веб-курсы

W3Schools оптимизирована для обучения и повышения квалификации. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, политику конфиденциальности и файлы cookie.

Читайте также: