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

25 марта 2015 Антон Кулешов 2801 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
Читайте далее

Всплывающие подсказки на чистом CSS

16 апреля 2015 Антон Кулешов

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

Задний фон для сайта в виде частиц

14 октября 2014 Антон Кулешов

Если вы хотите добавить интересный эффект к себе на сайт, то предлагаю воспользоваться jQuery плагином particleground. При помощи этого дополнения вы сможете реализовать задний фон сайта в виде меняющихся и движущихся частиц.

Эффект печатающий машинки на JavaScript

14 марта 2016 Антон Кулешов

Сегодня я подготовил ответ на вопрос, который пришел мне на почту. Уже из названия можно понять, о чем пойдет речь. Меня спросили: если у меня скрипты с эффектами набора текста на JavaScript. К сожалению, мне не доводилось использовать у себя в практике данный эффект, но написать его будет несложно. К слову, порывшись у себя в закромах, я смог найти jQuery плагин, решающий данную проблему, о котором мы обязательно поговорим в одной из следующих статей, а пока напишем свой скрипт/сниппет.