Как определить активную вкладку в JavaScript?

Как определить активную вкладку в JavaScript?

529

Иногда бывает необходимо отследить, находится ли пользователь на вкладку вашего сайта или нет. Это может пригодиться при создании таймеров, которые бы проверяли каждые 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>

Но суть работы от этого не меняется. Смысл остается прежним.

 

| | Как определить активную вкладку в JavaScript? | Иногда бывает необходимо отследить, находится ли пользователь на вкладку вашего сайта или нет. Это может пригодиться при создании таймеров, которые бы | http://blogprogram.ru/wp-content/uploads/2016/12/529-131x131.jpg

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *


Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>