Данные о браузере. Определение браузера при помощи JavaScript
Как-то потребовалось создать функцию, принимающую объект json со следующим форматом записи: "браузер":то, что следует вернуть , иначе говоря такую функцию, которая бы возвращала указанный объект в зависимости от браузера пользователя.
ТЗ, которое я для себя определил:
- браузеры можно группировать, указывая их через пробел
- браузерам можно задавать версию (ie6,opera10)
- браузерам можно задавать полную версию (opera10.15)
- поддержка самых популярных браузеров
Мой способ гарантированно не самый точный, так как он используют свойство userAgent объекта navigator, которое при желании подделывается, но с другой стороны любой способ проверки клиента как серверный, так и клиентский можно обойти. Так же встает вопрос о надобности такой "подделки", тем более мало какие роботы исполняют javascript код.
После изучения следующей статьи http://ru.wikipedia.org/wiki/Useragent , я написал функцию ifBrowser. Она поддерживает проверку следующий браузеров: Internet Explorer, Firefox, Opera, Chrome, Safari, Konqueror, Iceweasel, SeaMonkey .
Код функции:
/* ifBrowser 0.0.3 a function which returns specified data depending on a user"s browser written by Plyushch Gregory, 2012 is free to use for everyone in condition of saving the author"s name */ function ifBrowser (obj) { var none = obj["none"] || "none"; function cBrowser() { var ua = navigator.userAgent; var bName = function () { if (ua.search(/MSIE/) > -1) return "ie"; if (ua.search(/Firefox/) > -1) return "firefox"; if (ua.search(/Opera/) > -1) return "opera"; if (ua.search(/Chrome/) > -1) return "chrome"; if (ua.search(/Safari/) > -1) return "safari"; if (ua.search(/Konqueror/) > -1) return "konqueror"; if (ua.search(/Iceweasel/) > -1) return "iceweasel"; if (ua.search(/SeaMonkey/) > -1) return "seamonkey";}(); var version = function (bName) { switch (bName) { case "ie" : return (ua.split("MSIE ")).split(";");break; case "firefox" : return ua.split("Firefox/");break; case "opera" : return ua.split("Version/");break; case "chrome" : return (ua.split("Chrome/")).split(" ");break; case "safari" : return (ua.split("Version/")).split(" ");break; case "konqueror" : return (ua.split("KHTML/")).split(" ");break; case "iceweasel" : return (ua.split("Iceweasel/")).split(" ");break; case "seamonkey" : return ua.split("SeaMonkey/");break; }}(bName); return ; } var current_browser = cBrowser(); for (var key in obj) { var trg = key.toLowerCase(); if (trg.indexOf(current_browser) > -1) return obj; else if (trg.indexOf(current_browser) > -1) return obj; else { var nsymbol = trg.charAt(trg.indexOf(current_browser)+current_browser.length); if (trg.indexOf(current_browser) > -1 && (nsymbol == " " || nsymbol == "")) return obj; }; } return none; }
В случае если ни одного выражение не совпадает с браузером пользователя, возвращается "none", которое можно также указать как свойство передаваемого объекта.
Пример использования: (данный код повернет на 25 градусов все содержимое страницы в любом современном браузере)
Var transform = ifBrowser({ "ie":"msTransform", "chrome safari":"WebkitTransform", "firefox":"MozTransform", "opera":"OTransform", }) // определяем название нужного нам css свойства document.body.style = "rotate(25deg)"
Название браузера нужно вводить в следующем формате: ie, firefox, opera, chrome, safari, konqueror, iceweasel, seamonkey
. Регистр неважен. Версия пишется слитно с название, пример: ie7
. Если для нескольких браузеров должно возвратиться одно и тоже значение, вы просто указываете их через пробел, как
на примере ("chrome safari":"WebkitTransform"
). В качестве возвращаемого значения может выступать любой объект JavaScript (строка, число, функция, логическое значение и т.д.)
Существует достаточно большое количество браузеров, а также их версий. И проблема в том, что одни браузеры позволяют выполнить определённый скрипт, а другие не позволяют. Встаёт вопрос: а как узнать браузер пользователя в JavaScript , чтобы через условие решить: надо выполнять скрипт или нет. И о том, как определить имя и версию браузера пользователя я и напишу в этой статье.
Для таких целей существует объект Navigator , а точнее два его свойства: appName и appVersion . Давайте для начала выведем название браузера пользователю:
Document.write("Вы используете браузер " + navigator.appName);
В результате Вы увидите имя браузера пользователя . Также огромное значение оказывает не только сам браузер, но и его версия. И для таких случаев используется свойство appVersion :
Document.write("Версия Вашего браузера " + navigator.appVersion);
Свойства appName и appVersion доступны только для чтения (это и логично), поэтому изменить их у Вас не получится. Теперь встаёт вопрос, а как использовать их в операторе IF :
Var browser = navigator.appName;
if (browser == "NetScape")
document.write("Тут можно выполнять скрипты для обладателей браузеров NetScape");
Надеюсь, что я ответил на Ваш вопрос: "Как узнать имя и версию браузера в JavaScript ".
В этом уроке мы обсудим как узнать, какой браузер установлен на ПК. Вопрос может показаться банальным, но для некоторых пользователей эта тема действительно актуальна. Может быть такое, что человек недавно приобрёл компьютер и только начинает изучать его. Именно таким людям будет интересно и полезно прочитать эту статью. Итак, давайте начнём.
Браузер (обозреватель) – это программа с помощью, которой можно просматривать веб-страницы, можно сказать, смотреть Интернет. Веб-обозреватель даёт возможность смотреть видео, слушать музыку, читать различные книги, статьи и т.д.
На ПК может быть установлен, как один браузер, так и несколько. Рассмотрим, какой именно браузер установлен у Вас на компьютере. Есть несколько методов: посмотреть в обозревателе, открыть параметры системы или воспользоваться командной строкой.
Способ 1: в самом интернет-обозревателе
Если Вы уже открыли веб-браузер, но не знаете, как он называется, то можно это выяснить по крайней мере двумя путями.
Первый вариант:
Второй вариант:
Способ 2: используя параметры системы
Этот метод будет немного сложнее, но Вы справитесь.
Определить версию и тип браузера проще всего при помощи JavaScript. JavaScript имеет стандартный объект под названием navigator , который содержит данные о браузере пользователя.
Объект navigator имеет много свойств, но в данном случае нас интересует свойство .UserAgent - это строка содержит данные о браузере, операционной системы, и многое другое.
Если вы хотите увидеть значение navigator.userAgent , то можете выполнить одно из следующих действий:
// Выводим информацию в окне предупреждений
alert
(navigator.userAgent
)
;
Document.write
// Печатаем значение в HTML документе
document.write
(navigator.userAgent
)
;
console.log()
// Выводим информацию в консоль браузера
console.log
(navigator.userAgent
)
;
Если вы используете Internet Explorer 11 на Windows 7, на выходе будет:
Mozilla/5.0 (Windows NT 6.1; WOW64; Trident/7.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; MASM; .NET4.0C; .NET4.0E; rv:11.0) like Gecko
Как вы можете видеть, проблема с navigator.userAgent в том, что это одна гигантская строка, и она не очень понятна для человека.
Так что, если вы хотите использовать эту информацию, или показать её пользователю, то нужно сначала распарсить строку.
Но если вы не дружите с регулярными выражениями, то вам всегда поможет библиотека Detect.js созданная Darcy Clarke.
Detect.js может разобрать значение строки в объект JavaScript для удобного восприятия человеком.
Чтобы отобразить имя браузера, версию браузера и операционной системы в нашей консоли, используя Detect.js, мы можем написать следующий код:
//Создаем объект "user", который будет содержать информацию Detect.js
//Вызываем detect.parse() с navigator.userAgent в качестве аргумента
var
user =
detect.parse
(navigator.userAgent
)
;
// Выводим нужные значения в консоли браузера
console.log
(
user.browser
.family
user.browser
.version
user.os
.name
)
В Firefox вы увидите следующую строку
Firefox 30 Windows 7
Chrome 35 Windows 7
Для написания кода под определенный браузер, вы можете использовать условные операторы.
Например, если вы хотите, вывести сообщение для пользователей браузера Safari, вы можете сделать следующее:
if
(user.browser
.family
===
"Safari"
)
{
alert
("You\"
re using the Safari browser"
)
;
}
Ниже приведена таблица всех анализируемых свойств:
| Свойство | Описание |
|---|---|
| browser.family | Имя браузера |
| browser.name | Имя браузера и его версия |
| browser.version | Полная версия браузер |
| browser.major | Основной номер версии браузера |
| browser.minor | Дополнительный номер версии браузера |
| browser.patch | Номер патча браузера |
| device.family | Имя устройства |
| device.name | Имя устройства и версия |
| device.version | Полная версия устройства |
| device.major | Основной номер версии устройства |
| device.major | Дополнительный номер версии устройства |
| device.patch | Номер патча устройства |
| device.type | Тип устройства (например, "Desktop" или "Mobile") |
| device.manufacturer | Производитель устройства |
| os.family | Название операционной системы |
| os.name | Полне имя операционной системы |
| os.version | Полная версия операционной системы |
| os.major | Основной номер версии операционной системы |
| os.minor | Дополнительный номер версии операционной системы |
| os.patch | Номер патча операционной системы |
Примечание: Если свойство не может быть распарсено, то его значение будет null или undefined. Если вы собираетесь показывать эту информацию для пользователей, то вы должны иметь условные операторы для null и undefined.
Почему вы не должны использовать определение типа браузера при помощи JavaScript
Определение типа браузера при помощи JavaScript не является надежным
JavaScript может быть отключен пользователем или userAgent может быть подменен.
Кроме того, есть множество браузеров и версий браузеров - и их будет еще больше в будущем - что делает определение браузера непрактичным и неудобным в сопровождении, потребует постоянного обновление кода.
Определение возможностей является лучшим вариантом
Определение возможностей браузера при помощи JavaScript значительно надежнее, вы проверяете поддерживает ли браузер пользователя определенные свойства или методы, например, такие как новый HTML5 API - WebRTC, или Canvas, или любой другой.
На примере WebRTC я продемонстрирую эту точку зрения. На сайте caniuse.com вы можете увидеть как реализована на текущий момент поддержка WebRTC в различных браузерах:
В приведенной выше таблице красным цветом отмечены версии не поддерживающие WebRTC, а зеленым - поддерживающие.
Если бы мы использовали определение типа и версии браузера, то чтобы определить может ли клиент использовать WebRTC потребовалось бы масса условных операторов. И каждый раз когда новая версия браузера выходит в релиз, мы должны были бы обновить наш код.
Поэтому наилучший вариант - это проверить в режиме реального времени, доступна ли функция, которую мы хотим использовать, в браузере клиента. Эта техника называется функция обнаружения.
Как мы можем обнаружить доступна ли функция WebRTC в браузере?
Мы знаем, что WebRTC-совместимый браузер должен иметь функцию getUserMedia() , поэтому мы должны проверить, сможем ли мы ссылаться на неё.
Приведенный ниже код проверяет доступность WebRTC у клиента и выводит окно с предупреждением, если функция доступна. Это заимствовано и адаптировано из MDN :
// hasWebRTC is undefined
// if .getUserMedia() (and its variants) is not available
var
hasWebRTC =
navigator.getUserMedia
||
navigator.webkitGetUserMedia
Во-первых, разные браузеры по передают в интернет разные данные о себе и компьютере. Они более болтливы, другие - менее. А есть и такие, которые могут передавать о себе ложную информацию, представляясь кем либо другим. Вы можете открыть эту страницу в нескольких браузерах и посмотреть, кем каждый из них представляется в сети интернет..html
Во-вторых, если вы в серьез озаботились своей безопасностью в интернете и пользуетесь анонимайзерами или открываете сайты в режиме «Инкогнито» своего любимого браузера, то вы можете с помощью этой страницы проверить, насколько ваши действия действительно анонимны в интернете, а какую информацию вы все еще выставляете для всеобщего обозрения.
В-третьих, даже несмотря на то, что вы можете заставить свой браузер отдавать поддельные данные о себе и компьютере, вас все равно можно идентифицировать по совокупности передаваемых данных. Чем более уникален этот набор и чем по большему количеству параметров он отличается от основной массы пользователей интернета, тем вероятнее можно предположить, что вы - это именно вы. Стопроцентной точности такой эвристический алгорим не дает, но в половине случаев угадывает, особенно, если у применяющего его есть доступ к большому количеству данных.
В любом случае, не стоит переживать. Большая часть показанной здесь информации имеет технический характер и браузеры обязаны ее передавать для успешной работы. Это абсолютно нормально и так и должно быть.