Javascript узнать каким браузером

Объект Navigator в JavaScript – информация о браузере

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

Объект navigator – это свойство window :

const navigatorObj = window.navigator; // или без указания window // const navigatorObj = navigator;

Свойства и методы объекта navigator

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

Свойства объекта navigator :

• appCodeName – кодовое имя браузера;
• appName – имя браузера;
• appVersion — версия браузера;
• cookieEnabled — позволяет определить включены ли cookie в браузере;
• geolocation — используется для определения местоположения пользователя;
• language — язык браузера;
• online — имеет значение true или false в зависимости от того находиться ли браузер в сети или нет;
• platform — название платформы, для которой скомпилирован браузер;
• product — имя движка браузера;
• userAgent — возвращает заголовок user agent , который браузер посылает на сервер.

• javaEnabled – позволяет узнать, включён ли в браузере Java;
• sendBeacon — предназначен для отправки небольшого количества информации на веб-сервер без ожидания ответа.

Пример

Например, выведем все свойства и методы объекта Navigator на веб-страницу:

Обнаружение браузера с помощью userAgent

userAgent — это строка, содержащая информацию о браузере, которую он посылает в составе заголовка запроса на сервер.

Пример содержания строки userAgent в браузере Google Chrome:

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36

Она содержит сведения об операционной системе, браузере, версиях, платформах и т.д.

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

const detectBrowser = () = { let result = 'Other'; if (navigator.userAgent.indexOf('YaBrowser') !== -1 ) { result = 'Yandex Browser'; } else if (navigator.userAgent.indexOf('Firefox') !== -1 ) { result = 'Mozilla Firefox'; } else if (navigator.userAgent.indexOf('MSIE') !== -1 ) { result = 'Internet Exploder'; } else if (navigator.userAgent.indexOf('Edge') !== -1 ) { result = 'Microsoft Edge'; } else if (navigator.userAgent.indexOf('Safari') !== -1 ) { result = 'Safari'; } else if (navigator.userAgent.indexOf('Opera') !== -1 ) { result = 'Opera'; } else if (navigator.userAgent.indexOf('Chrome') !== -1 ) { result = 'Google Chrome'; } return result; }

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

Но при использовании navigator.userAgent следует иметь в виду, что эта информация не является 100% достоверной, поскольку она может быть изменена пользователем.

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

Определение мобильного устройства посредством userAgent

Самый простой способ обнаружить мобильные устройства — это найти слово mobile в пользовательском агенте ( userAgent ):

const isMobile = navigator.userAgent.toLowerCase().match(/mobile/i); if (isMobile) { // для мобильных устройств } else { // для не мобильных устройств }

Более подробный вариант идентификации мобильного браузера:

const isMobile = navigator.userAgent.toLowerCase().match(/mobile/i); const isTablet = navigator.userAgent.toLowerCase().match(/tablet/i); const isAndroid = navigator.userAgent.toLowerCase().match(/android/i); const isiPhone = navigator.userAgent.toLowerCase().match(/iphone/i); const isiPad = navigator.userAgent.toLowerCase().match(/ipad/i);

Объект geolocation

Объект geolocation предназначен для определения местоположения устройства. Доступ к этому объекту осуществляется через свойство « navigator.geolocation »:

const geo = navigator.geolocation; // или так // const geo = window.navigator.geolocation;

Узнать поддерживает ли браузер геолокацию, можно посредством проверки существования свойства geolocation в объекте navigator :

if (!navigator.geolocation) { console.error('Ваш браузер не поддерживает геолокацию!'); }

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

Получение текущего местоположения пользователя

Получение текущего местоположения пользователя осуществляется через метод getCurrentPosition .

// аргумент success - обязательный navigator.geolocation.getCurrentPosition(success[, error[, options]);

Этот метод посылает асинхронный запрос. В случае успеха мы можем получить местоположение устройства, в противном случае – нет.

Метод getCurrentPosition принимает 3 аргумента:

• success — функцию обратного вызова, которая будет вызвана при успешном получении геоданных (т.е. когда пользователь разрешил доступ сайту или веб-приложению к Geolocation API и данный API определил местоположение пользователя);
• error — функцию обратного вызова, которая вызывается при ошибке (т.е. когда пользователь не разрешил доступ к Geolocation API, или данный API не смог определить местонахождение пользователя, или истекло время ожидания timeout );
• options — объект, содержащий настройки.

В options можно установить:

• maximumAge — следует ли информацию о местонахождении пользователя кэшировать (в миллисекундах) или пытаться всегда получать реальное значение (значение 0 — по умолчанию);
• timeout — максимальное время в миллисекундах в течении которого нужно ждать ответ (данные о местоположении); если ответ за указанное время не пришёл, то вызывать функцию обратного вызова error (по умолчанию имеет значение infinity , т.е. ждать бесконечно);
• enableHighAccuracy — при значении true будет пытаться получить наилучшие результаты, т.е. более точное местоположение (для этого может понадобиться задействовать GPS), что в свою очередь может привести к более длительному времени отклика или увеличению энергопотребления; по умолчанию — false .

В функцию success передаётся в качестве первого аргумента объект GeolocationPosition . Он содержит информацию о местоположении устройства ( coords ) и времени, когда оно было получено ( timestamp ).

Объект coords содержит следующие свойства:

• latitude — широта (в градусах);
• longitude — долгота (в градусах);
• altitude — высота над уровнем моря (в метрах);
• speed — скорость устройства в метрах в секунду; это значение может быть null .

Пример получения местоположения устройства:

// при успешном получении сведений о местонахождении function success(position) { // position - объект GeolocationPosition, содержащий информацию о местонахождении const latitude = position.coords.latitude; const longitude = position.coords.longitude; const altitude = position.coords.altitude; const speed = position.coords.speed; // выведем значения в консоль console.log(`Широта: ${latitude}°`); console.log(`Долгота: ${longitude}°`); console.log(`Высота над уровнем моря: ${altitude}м`); console.log(`Скорость: ${speed}м/c`); } function error() { console.log('Произошла ошибка при определении местоположения!'); } if (!navigator.geolocation) { // получаем текущее местоположение пользователя navigator.geolocation.getCurrentPosition(success, error); }

Методы watchPosition и clearWatch

Метод watchPocation используется когда нужно получать данные о местоположении каждый раз, когда оно меняется. Метод возвращает целое число, являющееся идентификатором задачи.

navigator.geolocation.watchPosition(success[, error[, options]])

Метод clearWatch предназначен для удаления задачи по её идентификатору, которую вы создали посредством watchPosition .

// создаём задачу и сохраняем её идентификатор в watchId let watchId = navigator.geolocation.watchPosition(success, error, options); // удаляем задачу по её идентификатору clearWatch(watchId);

Источник

Как определить браузер пользователя используя JavaScript

Ты можешь узнать какой браузер запущен у пользователя (Chrome, IE, LightHouse, FireFox, Safari, etc.) с помощью обычного JavaScript.

Чтобы определить браузер пользователя, ты должен проанализировать поле userAgent в объекте navigator .

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

if (navigator.userAgent.includes('Safari')) < // у пользователя запущен Safari // сделаем что-то полезное > 

С другой, стороны, если ты хочешь сделать что-то для всех браузеров кроме Chrome , ты должен проверить, что строка userAgent не включает имя нужного браузера:

if (!navigator.userAgent.includes('Chrome')) < // пользователь НЕ использует Chrome > 

Используем indexOf и toLowerCase

Для проверки вхождения имени браузера в строку userAgent ты можешь использовать метод indexOf вместо includes . Он возвращает -1 , если подстрока не найдена.

if (navigator.userAgent.indexOf('Chrome')  0) < // пользователь НЕ использует Chrome > 

Если ты не уверен как именно называется браузер, можешь использовать функцию toLowerCase на строке navigator.userAgent . Это поможет избежать случайной ошибки связанной с большими/маленькими буквами:

if (navigator.userAgent.toLowerCase().indexOf('chrome')  0) < // пользователь НЕ использует Chrome > 

Источник

Определить браузер (JavaScript)

Определить браузер в JavaScript, можно вытащив данные из переменной navigator.userAgent .

function browser() < var ua = navigator.userAgent; if (ua.search(/MSIE/) >0) return ‘Internet Explorer’; if (ua.search(/Firefox/) > 0) return ‘Firefox’; if (ua.search(/Opera/) > 0) return ‘Opera’; if (ua.search(/Chrome/) > 0) return ‘Google Chrome’; if (ua.search(/Safari/) > 0) return ‘Safari’; if (ua.search(/Konqueror/) > 0) return ‘Konqueror’; if (ua.search(/Iceweasel/) > 0) return ‘Debian Iceweasel’; if (ua.search(/SeaMonkey/) > 0) return ‘SeaMonkey’; // Браузеров очень много, все вписывать смысле нет, Gecko почти везде встречается if (ua.search(/Gecko/) > 0) return ‘Gecko’; // а может это вообще поисковый робот return ‘Search Bot’; >

Небольшое разъяснение

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

Например Google Chrome сделан на основе браузера Safari, и записи очень похожи:

Google Chrome — Mozilla/5.0 . Chrome/7.0.503.0 Safari/534.6
Safari — Mozilla/5.0 . Version/5.0.2 Safari/533.18.5

Поэтому очередность проверки данных по тексту достаточно велика.

Категории

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

• Определить версию IE (jQuery)
• Определить какая клавиша нажата (JavaScript)
• Координаты мыши (JavaScript)
• Параметры функции по-умолчанию (JavaScript)
• Модальное окно (JavaScript)
• Округление до знака — JavaScript
• str_repeat (JavaScript)
• Ассоциативный массив в JavaScript
• str_pad (JavaScript)
• JavaScript md5
• Строку в массив (JavaScript)
• Максимальное число (JavaScript)

Комментарии

Автор что куришь то когда пишешь что CHROME сделан на основе SAFARI — они оба сделаны на базе FF тогда если верить первой записи обоих юзерагентов)))
они оба на WebKit . и все..

Вход на сайт

Введите данные указанные при регистрации:

Социальные сети

Вы можете быстро войти через социальные сети:

Источник