Атрибут onblur тега <body>
Описание
Атрибут onblur позволяет задать JavaScript-код, который выполняется, когда элемент <body> теряет фокус. Для тега <body> это происходит, когда пользователь переключается с текущей страницы на другую вкладку, приложение или когда окно браузера теряет фокус.
<body onblur="handleWindowBlur()">
<h1>Важная страница</h1>
<p>Следите за временем!</p>
<script>
function handleWindowBlur() {
console.log('Пользователь переключился с этой страницы');
document.title = "Вернитесь назад!";
}
</script>
</body>
Основные сценарии использования:
| Сценарий | Применение |
|---|---|
| Изменение title страницы | Привлечение внимания пользователя |
| Пауза в мультимедиа | Автоматическая остановка видео/аудио |
| Аналитика | Отслеживание времени вне страницы |
| Игры | Пауза игры при переключении вкладок |
Рекомендации по использованию:
- Используйте для улучшения пользовательского опыта, а не для навязчивости
- Сочетайте с
onfocusдля полного контроля - Не злоупотребляйте изменением title страницы
- Для мультимедиа используйте специальные API (например, Video.pause())
- Тестируйте поведение в разных браузерах
Практический пример с мультимедиа:
<body onblur="pauseMedia()" onfocus="playMedia()">
<video id="myVideo" controls>
<source src="movie.mp4" type="video/mp4">
</video>
<script>
const video = document.getElementById('myVideo');
function pauseMedia() {
video.pause();
}
function playMedia() {
if (!video.paused) return;
video.play().catch(e => console.log(e));
}
</script>
</body>
Важные замечания:
- Событие может не срабатывать при определенных условиях
- Некоторые браузеры ограничивают функциональность
- Мобильные браузеры могут обрабатывать событие по-другому
- Не полагайтесь только на это событие для критической функциональности
Современный подход:
<script>
// Лучшая практика - использовать addEventListener
window.addEventListener('blur', () => {
console.log('Окно потеряло фокус');
// Дополнительные действия
});
window.addEventListener('focus', () => {
console.log('Окно получило фокус');
// Восстановление состояния
});
// Альтернатива - Page Visibility API
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
console.log('Страница скрыта');
} else {
console.log('Страница видима');
}
});
</script>
Примечание: Для более надежного определения видимости страницы рекомендуется использовать Page Visibility API, который предоставляет более точную информацию о состоянии видимости документа.