Как узнать что пользователь перешел на другую вкладку или свернул браузер

В случаях когда пользователь свернул окно браузера или перешел на другую вкладку, есть смысл отключить ненужные сетевые запросы, динамическое обновление контента или остановить воспроизведение аудио/видео.

Для этих целей есть Page Visibility API, который позволяет узнать, находится ли страница в активной вкладке браузера или нет.

Свойство document.visibilityState может принимать следующие значения:

visible Содержимое страницы частично или полностью видно пользователю.
hidden Содержимое страницы не отображается.
prerender Содержимое страницы предварительно отрисовывается и не отображается для пользователя (поддерживается не во всех браузерах).
unloaded Страница находится в процессе выгрузки из памяти (поддерживается не во всех браузерах).
console.log(document.visibilityState);
JS

Свойство document.hidden принимает значение true, если браузер свернули или перешли на другую вкладку и false — если любая часть страницы видна пользователю.

console.log(document.hidden);
JS

Также в составе Page Visibility есть событие visibilitychange, которе срабатывает при изменении этих свойств.

Пример использования:

document.addEventListener("visibilitychange", function(){
	if (document.hidden){
		console.log('Вкладка не активна');
	} else {
		console.log('Вкладка активна');    
	}
});
JS

Результат:

Перейдите на другую вкладку браузера или сверните окно

Как определить, что окно браузера было свернуто или потеряло фокус?

Функции Page Visibility не работает если пользователь снял фокус с окна браузера, в таком случаи помогут события onfocus и onblur.

window.onfocus = function(){
	console.log('Вкладка активна');
}

window.onblur = function(){
	console.log('Вкладка не активна');
}
JS

JQuery:

$(window).on("focus", function(){
	console.log('Вкладка активна');
});

$(window).on("blur", function(){
	console.log('Вкладка не активна');
});
JS

Результат:

Снимите фокус с окна браузера

01.11.2020

Комментарии

, чтобы добавить комментарий.

Другие публикации

Эффект плавного появления страницы хорошо подходит для рекламных сайтов и лэндингов. Сделать его можно с помощью CSS...
4184
+2
Функции Javascript для вывода и отладки информации в консоли браузера.
2272
0
getSelection() возвращает выделенный пользователем текст, за исключением текстовых полей, ​для них используются...
1776
0
Сборник jQuery приемов с textarea - получить содержимое, вставить значение, подсчет количества символов и строк и т.д.
23540
+3
Если добавить атрибут contenteditable к элементу, его содержимое становится доступно для редактирования пользователю, а...
8625
+12
По спецификации HTML в option нельзя вставить ссылку, если все-таки её туда вставить, то работать она не будет. В таких случаях можно сделать перенаправление браузера по клику на JS или имитацию...
1918
0