falbar Как узнать версию браузера, и зашел ли пользователь к нам на сайт с телефона

Как узнать версию браузера, и зашел ли пользователь к нам на сайт с телефона

25 марта 2015 4840 0

is - библиотека проверок, которая позволяет решать ряд задач, стоящих перед веб-разработчиком. К примеру, таких как: как узнать браузер, с которого заходил пользователь, как узнать его операционную систему, он зашел с мобильного устройства или с персонального компьютера и многие другие.

Реклама

Все эти данные нам необходимы для оптимизации работы наших сайтов и веб–приложений, а также для создания кроссбраузерных проектов, где в зависимости от браузера или устройства подключается тот или иной код.

Приведу простейший пример, как можно отследить пользователя зашедшего с оперы, воспользовавшись методом opera().

if(is.opera()){
    // Пользователь зашёл с оперы
}else{
 // Пользователь зашёл с другого браузера
};

Думаю, принцип понятен. Сама библиотека включает в себя уйму проверок, начиная с проверки типов переменных и определения, с чего зашёл пользователь (с телефона/планшета/компьютера, его браузер, ОС, вид телефона), и заканчивая определением online или offline в данный момент пользователь, корректности ввода почты, url и т.д.

Увидеть все методы объекта можно тут arasatasaygin там же есть примеры использования.

Рассмотрим еще один пример использования данной библиотеки для решения наиболее часто возникающих вопросов. Конкретно определим: с какого браузера зашёл пользователь к нам на страницу, так же узнаем его операционную систему и тип устройства, с которого был произведён заход. В конце выведем результат на экран.

Подключаем библиотеку is:

<script src="is.min.js" type="text/javascript"></script>

Пишем собственно скрипт:

window.onload = function(){

  var browser = "Ваш браузер - ",
       os      = "Ваша OC - ",
       device  = "Вы зашли с - ";

    if(is.ie()){
        browser += "IE";
  }else if(is.chrome()){
      browser += "Chrome";
  }else if(is.firefox()){
     browser += "Firefox";
 }else if(is.opera()){
       browser += "Opera";
   }else if(is.safari()){
      browser += "Safari";
  }else{
      browser += "Else";
    };

  if(is.windows()){
       os += "windows";
  }else if(is.mac()){
     os += "mac";
  }else if(is.linux()){
       os += "linux";
    }else{
      os += "else";
 };

  if(is.desktop()){
       device += "PC";
   }else if(is.mobile()){
      device += "mobile";
   }else{
      device += "else";
 };

  var brEl = document.getElementById("browser"),
        osEl = document.getElementById("os"),
     deEl = document.getElementById("device");

 brEl.innerHTML = browser;
   osEl.innerHTML = os;
    deEl.innerHTML = device;
};

Добавляем HTML разметку на страницу:

<div id="page">
    <h2>Библиотека is.js</h2>
   <p id="browser"></p>
  <p id="os"></p>
   <p id="device"></p>
</div>

Как видите всё довольно просто. Из этого примера видно, как легко использовать методы библиотеки. Вкратце расскажу, что тут происходит: в самом начале я обернул код в функцию onload(), так как мне надо, чтобы код отработал после загрузки страницы. Далее через конструкцию else if в каждом случае проверил соответствующие методы на определения вида браузера, операционной системы и вида устройства, а в конце вывел сообщения в соответствующие элементы p с индикаторами.

Ещё хочется добавить, что не всегда могут потребоваться все проверки, которые нам предоставляет данный скрипт. В этом случае очень легко можно их вытянуть из неупакованной версии и добавить к себе в проект, это позволит сэкономить место и не тянуть ненужный код.

Реклама
Комментариев еще не оставлено
no_avatar