- Navigator: userAgent property
- Value
- Examples
- Specifications
- Browser compatibility
- See also
- Found a content problem with this page?
- MDN
- Support
- Our communities
- Developers
- Объект Navigator в JavaScript – информация о браузере
- Свойства и методы объекта navigator
- Пример
- Обнаружение браузера с помощью userAgent
- Определение мобильного устройства посредством userAgent
- Объект geolocation
- Получение текущего местоположения пользователя
- Методы watchPosition и clearWatch
- Как изменить user agent в Chrome js?
Navigator: userAgent property
The Navigator.userAgent read-only property returns the user agent string for the current browser.
Note: The specification asks browsers to provide as little information via this field as possible. Never assume that the value of this property will stay the same in future versions of the same browser. Try not to use it at all, or only for current and past versions of a browser. New browsers may start using the same UA, or part of it, as an older browser: you really have no guarantee that the browser agent is indeed the one advertised by this property.
Also keep in mind that users of a browser can change the value of this field if they want (UA spoofing).
Browser identification based on detecting the user agent string is unreliable and is not recommended, as the user agent string is user configurable. For example:
- In Firefox, you can change the preference general.useragent.override in about:config . Some Firefox extensions do that; however, this only changes the HTTP header that gets sent and that is returned by navigator.userAgent . There might be other methods that utilize JavaScript code to identify the browser.
- Opera 6+ allows users to set the browser identification string via a menu.
Value
A string specifying the complete user agent string the browser provides both in HTTP headers and in response to this and other related methods on the Navigator object.
The user agent string is built on a formal structure which can be decomposed into several pieces of info. Each of these pieces of info comes from other navigator properties which are also settable by the user. Gecko-based browsers comply with the following general structure:
userAgent = appCodeName/appVersion number (Platform; Security; OS-or-CPU; Localization; rv: revision-version-number) product/productSub Application-Name Application-Name-version
Examples
alert(window.navigator.userAgent); // alerts "Mozilla/5.0 (Windows; U; Win98; en-US; rv:0.9.2) Gecko/20010725 Netscape6/6.1"
Specifications
Browser compatibility
BCD tables only load in the browser
See also
Found a content problem with this page?
This page was last modified on Apr 7, 2023 by MDN contributors.
Your blueprint for a better internet.
MDN
Support
Our communities
Developers
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
Объект 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);
Как изменить user agent в Chrome js?
Мне надо изменять User Agent в хроме при работе расширения через JavaScript. Не предлагать готовые расширения, мне нужно для своего проекта.
Спасибо всем кто откликнулись
daminik00: вам Александр Таратин шикарную ссылку привел. Там почти готовое решение приведено. Вы свое расширение думаете писать? Если да и не знаете как поступить с кодом по ссылке, то у меня плохие новости )))
Мне надо изменять User Agent в хроме при работе расширения через JavaScript. Не предлагать готовые расширения, мне нужно для своего проекта.
Алексей Ярков: Мне просто нужно сделать скрипт, но он должен работать толко через мобильную версию. Можно конечно заходить через инструменты разработчика и менять, но это не подходит для продакшена
daminik00: Ну даааа, теперь гораздо понятнее стало ))) У вас будет страница, которая будет доступна только с мобильника, и с нее надо слать запросы с измененным UA?
Алексей Ярков: Нет, будет скрипт который ходит по сайту, но удобнее делать это если запускается мобильная версия сайта. А запустить ее кроме как изменить UA никак не получится
Алексей Ярков: ну то есть мне надо использовать чужое? Мне просто надо интегрировать это решение в свое расшерение
daminik00: мы как на разных языках говорим ))) Я же спрашивал: «Вы свое расширение думаете писать?». Повторюсь еще раз: вам Александр Таратин отличную ссылку дал. Действуйте. Или покажите что именно в коде непонятно.
var requestFilter = < urls: [ "" ] >; // Вот тут указать новый UA var ua = "Mobile user agent"; chrome.webRequest.onBeforeSendHeaders.addListener(function(details) < var headers = details.requestHeaders; if( !localStorage['user-agent'] ) < localStorage['user-agent'] = ua; return; >for(var i = 0, l = headers.length; i < l; ++i) < if( headers[i].name === 'User-Agent' ) < break; >> if(i < headers.length) < headers[i].value = localStorage['user-agent']; >return ; >, requestFilter, ['requestHeaders','blocking']);