Enter fullscreen mode

Объект 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);

Источник

Saved searches

Use saved searches to filter your results more quickly

You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session.

Javascript library wrapping the http://userinfo.io API

License

vdurmont/userinfo-js

This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Sign In Required

Please sign in to use Codespaces.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching GitHub Desktop

If nothing happens, download GitHub Desktop and try again.

Launching Xcode

If nothing happens, download Xcode and try again.

Launching Visual Studio Code

Your codespace will open once ready.

There was a problem preparing your codespace, please try again.

Latest commit

Git stats

Files

Failed to load latest commit information.

README.md

This library helps you query the userinfo.io API and retrieve useful information about your user such as his IP address and his location.

Just add the library to your html file:

script type pl-s">text/javascript" src pl-s">//cdnjs.cloudflare.com/ajax/libs/userinfo/1.1.1/userinfo.min.js">script>

This will load the library from CDNJS. You can also download the version 1.1.1 or use the current development version (may not be stable).

Note: this library is an AMD module so you can also use it with requirejs, curl, lsjs, etc.

UserInfo.getInfo(function(data)  // Do something with the data >, function(err)  // Do something with the error >);

Here is an example of what is returned by the API:

< "request_date": "2014-09-21T01:20:46.861Z", "ip_address": "192.77.237.95", "position": < "latitude": 37.7758, "longitude": -122.4128, "accuracy": null >, "continent": < "name": "North America", "code": "NA" >, "country": < "name": "United States", "code": "US" >, "city": < "name": "San Francisco", "code": "94103" > >

Note that you will have to check the existence of the fields: if it can’t resolve your position, userinfo will return null values.

• v1.1.1
  • Fix IE8 & IE9 issues with cross-domain requests
  • The API url is now in https
  • Sending a X-Userinfo-Client-Id header with the requests to identify the client
  • Initial release

  Источник

  How to get user IP address, location, and device info using JavaScript in browser

  JavaScript is not able to get user IP address when running in browser. However, it is possible to do that with a server-side API call. With an API service called VisitorAPI, you can make it happen in just a couple lines of JavaScript. VisitorAPI returns the user’s IP address, location, currencies, languages, and device info with a REST API call. The following code loads the API:

  var VisitorAPI=function(t,e,a),s.open("GET","https://visitorapi-dev.uc.r.appspot.com/api/?pid highlight__panel js-actions-panel">