Прежде чем мы углубимся в детали API, полезно знать, почему он полезен для нас.
Когда страница находится в фоновом режиме, вы можете выполнять следующие действия.
- приостановить видео и анимацию, так как пользователь все равно не смотрит на них
- Замедлите или остановите обновления с вашего сервера, тем самым сэкономив пропускную способность пользователей и снизив нагрузку на ваши серверы.
- Уведомляйте пользователя о событиях с помощью уведомлений, чтобы он мог вернуться на ваш сайт.
- Отслеживайте, сколько времени пользователи на самом деле проводят на вашем сайте и страницах.
Методы API
документ.скрытый
document.hidden возвращает значение true, если вся страница в настоящий момент скрыта.
document.visibilityState
Он имеет четыре возможных значения, которые определяют более высокий уровень детализации видимости страницы.
а) Видимый — документ полностью виден
б) hidden — документ полностью виден
c) Документ загружен, но находится за пределами экрана
г) unloaded — документ не загружен
изменение видимости
Это событие, которое вы можете прослушивать и которое срабатывает при изменении видимости страницы.
Пример:
document.addEventListener("visibilitychange", function(){ if(document.hidden == true){ console.log('the page is now completely hidden'); }else{ console.log('the page is now visible'); } });