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

Узнайте, как определить версию браузера пользователя с помощью JavaScript для адаптации веб-приложений и предупреждения об устаревших версиях.

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

Использование navigator.userAgent

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

Пример кода для определения версии браузера с помощью navigator.userAgent :

function getBrowserVersion() < const userAgent = navigator.userAgent; const browserName = userAgent.match(/(opera|chrome|safari|firefox|msie|trident(?=\/))\/?\s*(\d+)/i) || []; if (/trident/i.test(browserName[0])) < const rv = /\brv[ :]+(\d+)/g.exec(userAgent) || []; return `IE $`; > const version = browserName[2] ? browserName[2] : null; const browser = browserName[1] ? browserName[1] : null; if (browser === null || version === null) < return 'Unknown Browser'; >return `$ $`; > console.log(getBrowserVersion()); // Выведет название и версию браузера

Использование navigator.appName и navigator.appVersion

Еще один способ определить версию браузера — использовать свойства navigator.appName и navigator.appVersion . Однако стоит отметить, что данные свойства могут быть менее надежными, чем navigator.userAgent .

Пример кода для определения версии браузера с помощью navigator.appName и navigator.appVersion :

function getBrowserVersion() < const appName = navigator.appName; const appVersion = navigator.appVersion; let browserName = ''; let version = ''; if (appName === 'Microsoft Internet Explorer') < browserName = 'IE'; version = appVersion.slice(appVersion.indexOf('MSIE') + 5, appVersion.indexOf(';', appVersion.indexOf('MSIE'))); >else if (appName === 'Netscape') < browserName = 'Netscape'; version = appVersion.slice(appVersion.indexOf(' rv:') + 4, appVersion.indexOf(')')); >else < return 'Unknown Browser'; >return `$ $`; > console.log(getBrowserVersion()); // Выведет название и версию браузера

😉 Итак, теперь вы знаете, как определить версию браузера пользователя с помощью JavaScript. Удачи в разработке!

Источник