Иногда бывает необходимо отследить, находится ли пользователь на вкладку вашего сайта или нет. Это может пригодиться при создании таймеров, которые бы проверяли каждые 10 секунд, онлайн пользователь или нет, а также различных уведомлений или просто статистики.
Вариантов использования данной идеи может быть множество. Сделать такой код можно на JavaScript без использования jQuery.
Суть скрипта заключается в том, что мы должны улавливать активен ли элемент, на котором находится мышь пользователя за счет onfocus или пользователь переключился на другую вкладку (а может и вовсе закрыл ее) - onblur.
Код скрипта, который считает секунды проведенные пользователем на сайте.
Если мы в активной вкладке, то счет идет, если покинули вкладку - таймер останавливается. Но если снова зашли на эту вкладку, то счет продолжает идти дальше с того момента, откуда был остановлен. Своего рода я сделал скрипт, который информирует, сколько времени пользователь находится онлайн на сайте.
<div>Пользователь онлайн уже <span class="onlineuser">0</span> сек.</div>
<script type="text/javascript">
mya = true; //по умолчанию вкладка активна
a = 0;
setInterval(function(){
if(!mya) return; //если не активная вкладка, ничего не делаем
a++; //счетчик секунд
document.querySelector('.onlineuser').innerHTML = a;
}, 1000)
window.onfocus = function(){ mya = true; } //пользователь на вкладке сайте
window.onblur = function(){ mya = false; } //пользователь закрыл вкладку или переключил на другую
</script>
Думаю, из комментариев к скрипту, все должно быть предельно ясно, как работает скрипт. Если его брать за основу, то можно изменить функционал как угодно.
Некоторые пользователи делают тоже самое на jQuery вот так:
$(window).focus(function() { }); //Во вкладке
$(window).blur(function() { }); //Покинули вкладку
Или даже вот так (назначив выполнение скрипта на определенном теге):
<body onmouseover="infocus();" onmouseout="outfocus();"></body>
Но суть работы от этого не меняется. Смысл остается прежним.
PHP
Joomla
Joomla 1.5 модули и плагины
WordPress
Онлайн сервисы
Услуги
Работа в сети
Новое на сайте
Карта сайта
Добавить комментарий