Detect Browser in JavaScript

How to detect browser in JavaScript [Chrome, Firefox, Safari, Opera, Edge , MS IE]?

JavaScript detect browser name: Here in this article we learn how to detect browser in javascript. I had a requirement where based on browser I have to display something different. In short, I have to detect firefox browser in javascript and display the respective message to the user. Same if the user browser is chrome, then display respective message. Basically we write code in JavaScript to check user browser. Which help answer to our question .i.e How do I know if I am using IE or Chrome in JavaScript? Here we are detecting 5 major browsers and that are Chrome, Firefox, Safari, Opera, MS Edge. And we are showing 2 different approach to detect browser at client-side i.e using userAgent.match and userAgent.indexOf with live demo example. Although based on different browser display different content is not good practise.

Steps to detect browser name in JavaScript

1. HTML markup to display browser name.
2. JavaScript code to detect browser using useragent.match
3. JavaScript code to detect browser using useragent. indexOf

HTML markup to display browser name

First, we create a new index.html page and add the below markup. Here we add an h1 tag, which will display the browser name on page-load.

Approach 1: JavaScript code to detect browser name using userAgent.match

To detect user browser information we use the navigator.userAgent property. And then we match with the browser name to identify the user browser.

JS code to identify browser is as written below:

function fnBrowserDetect()< let userAgent = navigator.userAgent; let browserName; if(userAgent.match(/chrome|chromium|crios/i))< browserName = "chrome"; >else if(userAgent.match(/firefox|fxios/i)) < browserName = "firefox"; >else if(userAgent.match(/safari/i))< browserName = "safari"; >else if(userAgent.match(/opr\//i)) < browserName = "opera"; >else if(userAgent.match(/edg/i))< browserName = "edge"; >else < browserName="No browser detection"; >document.querySelector("h1").innerText="You are using "+ browserName +" browser"; >

Now call this JS function on page load, and this will display the user browser name on page load.

Approach 2: JavaScript code to detect browser using userAgent.IndexOf

Here in the 2nd approach we again using navigator.userAgent with indexof to figure out the browser name.

var browserName = (function (agent) switch (true) < case agent.indexOf("edge") >-1: return "MS Edge"; case agent.indexOf("edg/") > -1: return "Edge ( chromium based)"; case agent.indexOf("opr") > -1 && !!window.opr: return "Opera"; case agent.indexOf("chrome") > -1 && !!window.chrome: return "Chrome"; case agent.indexOf("trident") > -1: return "MS IE"; case agent.indexOf("firefox") > -1: return "Mozilla Firefox"; case agent.indexOf("safari") > -1: return "Safari"; default: return "other"; > >)(window.navigator.userAgent.toLowerCase()); 
document.querySelector("h1").innerText="You are using "+ browserName +" browser"; 
 
With the above code will be able to detect chrome browser, also with approach 2, we are able to detect MS Edge browser chromium based. By checking trident we were able to detect MS Internet Explorer browser IE in javascript.
 
Conclusion: Hereby using the navigator.userAgent we were successfully able to detect Chrome, Firefox, Edge, Safari, and Opera browser in Javascript. Add display the browser name on page load. It's in pure javascript, as we didn't use any external JS library for the browser detection. 
 
Thank you for reading, pls keep visiting this blog and share this in your network. Also, I would love to hear your opinions down in the comments.
 
 PS: If you found this content valuable and want to thank me? 👳 Buy Me a Coffee 
 
Subscribe to our newsletter
 
Get the latest and greatest from Codepedia delivered straight to your inbox.
 
Your email address will not be published. Required fields are marked *
 
Источник
 
Объект 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);
 
Источник
 
Читайте также:  Json class for php