Атрибут onfocus тега <body>
Описание
Атрибут onfocus позволяет задать JavaScript-код, который выполняется, когда окно браузера или страница получает фокус. Это происходит, когда пользователь возвращается на вкладку с вашей страницей или активирует окно браузера.
<body onfocus="handleWindowFocus()">
<h1>Мониторинг активности</h1>
<p id="lastActive"></p>
<script>
function handleWindowFocus() {
const now = new Date();
document.getElementById('lastActive').textContent =
`Последняя активность: ${now.toLocaleTimeString()}`;
document.title = "Добро пожаловать назад!";
}
</script>
</body>
Основные сценарии использования:
| Сценарий | Применение |
|---|---|
| Обновление данных | Проверка новых сообщений или обновлений |
| Восстановление состояния | Возврат к предыдущему состоянию интерфейса |
| Аналитика | Отслеживание времени возврата пользователя |
| Мультимедиа | Возобновление воспроизведения видео/аудио |
Рекомендации по использованию:
- Используйте для улучшения UX при возврате на страницу
- Сочетайте с
onblurдля полного контроля фокуса - Избегайте ресурсоемких операций при получении фокуса
- Для проверки обновлений используйте разумные интервалы
- Учитывайте производительность на мобильных устройствах
Практический пример с обновлением данных:
<body onfocus="checkForUpdates()">
<div id="news-feed">
<!-- Новости загружаются динамически -->
</div>
<script>
let lastUpdateTime = new Date();
function checkForUpdates() {
// Проверяем только если прошло больше 1 минуты
if (new Date() - lastUpdateTime > 60000) {
fetch('/api/news')
.then(response => response.json())
.then(news => {
updateNewsFeed(news);
lastUpdateTime = new Date();
});
}
}
</script>
</body>
Важные замечания:
- Событие может срабатывать многократно при переключении вкладок
- На мобильных устройствах поведение может отличаться
- Некоторые браузеры ограничивают частоту срабатывания
- Не все пользователи заметят изменения при возврате
- Для точного определения видимости используйте Page Visibility API
Современный подход:
<script>
// 1. Использование addEventListener
window.addEventListener('focus', () => {
console.log('Окно получило фокус');
// Дополнительные действия
});
// 2. Page Visibility API (рекомендуется)
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
console.log('Страница стала видимой');
// Действия при возврате на страницу
}
});
// 3. Объединение подходов
let windowFocused = true;
window.addEventListener('blur', () => windowFocused = false);
window.addEventListener('focus', () => {
windowFocused = true;
onWindowFocus();
});
</script>
Примечание: Для сложных сценариев отслеживания активности пользователя рекомендуется использовать Page Visibility API, который предоставляет более надежный способ определения видимости страницы в браузере.