Показать Меню
falbar Библиотека is

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

Библиотека is

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

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

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

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

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

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

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

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

<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>

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

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

На этом у меня всё, спасибо за внимание.

Источник
arasatasaygin.github.io

Подписаться на обновления

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