Определяем браузер пользователя и подставляем его название в страницу

16.02.2017

Задача

Определить браузер пользователя и в документе подставить название его браузера вместо текста, который стоит по умолчанию.

Решение нашел здесь.

JavaScript имеет стандартный объект под названием navigator, который содержит данные о браузере пользователя.

Объект navigator имеет много свойств, но в данном случае нас интересует свойство .UserAgent – это строка содержит данные о браузере, операционной системе и многое другое.

// Выводим информацию в окне предупреждений
alert(navigator.userAgent);

Получим такие данные в браузере Mozilla Firefox:

Mozilla/5.0 (Windows NT 6.3; WOW64; rv:51.0) Gecko/20100101 Firefox/51.0

Как вы можете видеть, проблема с navigator.userAgent в том, что это одна гигантская строка, и она не очень понятна для человека.

Так что, если вы хотите использовать эту информацию, или показать её пользователю, то нужно сначала распарсить строку. Но если вы не дружите с регулярными выражениями, то вам всегда поможет библиотека Detect.js созданная Darcy Clarke.

Чтобы во всем документе заменить текст внутри блоков с классом .user-agent на название вашего браузера, я написал небольшой скрипт:

$(function(){
  var user = detect.parse(navigator.userAgent);
  var userAgent = user.browser.family;
  $(".user-agent").text(userAgent);
});

И я точно знаю, что вы читаете эту статью в браузере Chrome! =)

Рекомендую к прочтению:

Комментарии (4) к “Определяем браузер пользователя и подставляем его название в страницу”

  • car insurance huntsville ontario

    Hmm is anyone else encountering problems with the pictures on this blog
    loading? I’m trying to figure out if its a problem on my end or
    if it’s the blog. Any suggestions would be greatly appreciated.

    Ответить
    • Denis Creative

      Thank you for message! This error was not due to the picture, but due to the disabling of the plugin with which the script was displayed. I fixed everything. Thank you.

      Ответить
  • Костя

    Я вообще только учусь делать сайты. Сейчас переношу верстку на файлы ворд пресс. И не запускается карусель – выдаёт ошибку, которую я перевел как “в браузере Хром после версии 101 перейти на navigator.userAgentData”. Вот, нашел Ваш сайт и код js, но в какой файл этот код вставить ? Main.js или в файл где прописан код карусели ? И да, я читаю Вашу статью в браузере Опера.

    Ответить
    • Denis Creative

      Ваш комментарий попал почему-то в спам.
      Вам не нужен код из этой статьи.
      Вам нужно проверить в консоли, что не так с вашим кодом, возможно ошибка в Main.js или неправильно подключены скрипты, или не подключен jQuery, или…

      Ответить

Оставить комментарий