Отслеживание активности окна браузера с помощью JavaScript
Быстрый ответ
Для определения активности вкладки браузера можно использовать атрибут document.hidden
и событие visibilitychange
, которое отслеживает переключение вкладки из активного состояния в неактивное и обратно.
document.addEventListener('visibilitychange', () => {
console.log(`Вкладка ${document.hidden ? 'неактивна' : 'активна'}`);
});
Page Visibility API, к которому относятся атрибут document.hidden
и событие visibilitychange
, поддерживается большинством современных браузеров, включая Chrome 13+, IE 10+, Firefox 10+ и Opera 12.10+. В браузерах старых версий, где данный API отсутствует, можно воспользоваться window.onblur
и window.onfocus
.
Поддержка кросс-браузерности и альтернативные решения
Очень важно писать код так, чтобы он был совместим с различными браузерами. В связи с различиями в поддержке API для определения видимости страницы в разных браузерах, названия событий и свойств могут иметь свои префиксы.
let hidden, visibilityChange;
if (typeof document.hidden !== "undefined") { // Opera 12.10 и выше
hidden = "hidden";
visibilityChange = "visibilitychange";
} else if (typeof document.msHidden !== "undefined") { // IE
hidden = "msHidden";
visibilityChange = "msvisibilitychange";
} else if (typeof document.webkitHidden !== "undefined") { // Webkit браузеры (Safari, Chrome)
hidden = "webkitHidden";
visibilityChange = "webkitvisibilitychange";
}
function handleVisibilityChange() {
if (document[hidden]) {
console.log("Вкладка не видна."); // Страница неактивна
} else {
console.log("Вкладка видна."); // Страница активна
}
}
if (typeof document.addEventListener === "undefined" ||
typeof document[hidden] === "undefined") {
alert("Используйте браузер, поддерживающий Page Visibility API.");
} else {
document.addEventListener(visibilityChange, handleVisibilityChange, false);
}
Благодаря условным проверкам и префиксам этот метод обеспечивает совместимость с различными браузерами.
Реализация продвинутого обнаружения
Для более тонкого определения активности пользователя следует использовать API видимости страницы совместно с отслеживанием событий ввода, таких как движение мыши, прокрутка страницы и нажатие клавиш.
let timer, userIsActive = true;
function activityMonitor() {
clearTimeout(timer);
userIsActive = true;
timer = setTimeout(() => userIsActive = false, 5000); // Пользователь считается неактивным после 5 секунд бездействия
}
document.addEventListener('mousemove', activityMonitor);
document.addEventListener('scroll', activityMonitor);
document.addEventListener('keypress', activityMonitor);
document.addEventListener('visibilitychange', function() {
if (document.hidden) {
clearTimeout(timer);
userIsActive = false;
} else {
activityMonitor();
}
});
Такой подход позволит отслеживать различные ситуации, когда активность пользователя может быть не совсем явной.
Визуализация
Возьмём для сравнения дом с системой безопасности и браузер с его обработчиками событий. Когда владелец находится дома, дом считается активным.
window.addEventListener('focus', function() {
console.log("Дом в \"рабочем режиме\" – владелец дома."); // Дом активен
});
Если же владелец ушел:
window.addEventListener('blur', function() {
console.log("Дом на замке – владелец не дома."); // Дом неактивен
});
Таким образом, мы создали систему уведомлений, которая сообщает нам о статусе нашей вкладки в браузере.
Периодические проверки и другие соображения
Чтобы избежать излишнего расхода ресурсов на выполнение задач в неактивной вкладке, можно проводить периодические проверки.
setInterval(function() {
if (!document.hidden && userIsActive) {
// Задачи выполняются, если вкладка активна
updateContent(); // "Пора обновить контент!"
}
}, 10000); // Проверяем каждые 10 секунд
Не забывайте тестировать работу событий с помощью инструментов разработчика. Проведение проверки кода в разных браузерах поможет достигнуть максимальной точности результатов.
Полезные материалы
- Page Visibility API – Web APIs | MDN — Полное руководство по API видимости страницы.
- HTML Standard — Официальная спецификация Page Visibility API.
- Возможно ли определить активность окна браузера в данный момент? – Stack Overflow — Различные примеры использования и опыт применения.
- Использование Page Visibility API | web.dev — Подробная статья о практических аспектах использования данного API.
- Введение в Page Visibility API — SitePoint — Начальное руководство по API видимости страницы.
- Can I use... Support tables for HTML5, CSS3, etc — Информация о поддержке API видимости страницы в различных браузерах.