Работа с Page Visibility API

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

Например это может пригодиться в таких случаях:

1. На странице сайта есть видеоролик и нам нужно устанавливать его на паузу всякий раз, когда вкладка браузера становиться неактивной и продолжать проигрывать если вкладка становится активной;
2. Можно изменять favicon страницы, если она скрыта;
3. Оповещать пользователя о событиях на сайте, если он находится в неактивной вкладке.

Для этих целей в JavaScript есть относительно новое API — Page Visibility API.

Сразу стоит отметить, что Page Visibility API поддерживают Chrome 13+, Internet Explorer 10, Firefox 10+, Opera 12.10+.

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

Определяем поддержку Page Visibility API

if ('visibilityState' in document) { alert ('Да поддерживает!'); }

На сегодняшний момент API имеет два полезных нам свойства и одно событие.

document.visibilityState – содержит состояние вкладки и может принимать три значения:

1. visible – вкладка активна и пользователь может видеть вашу страницу;
2. hidden – вкладка неактивна и пользователь смотрит куда-то в другое место;
3. prerender – страница находится в процессе её отрисовки.

document.hidden – свойство показывает скрытость вкладки логическим значением true или false соответственно.

Событие visibilitychange которое происходит каждый раз, как состояние страницы меняется. Отследить которое можно например так:

document.addEventListener('visibilitychange', function(e) { console.log('state:' + document.visibilityState); }, false);

Все было бы просто, если бы браузеры не сговорились. Все дело в том, что каждый браузер сейчас использует свои прификсы.

Свойство document.visibilityState, в зависимости от браузера, называется «visibilityState», «webkitVisibilityState», «mozVisibilityState», «msVisibilityState».

Свойство document.hidden, в зависимости от браузера, называется «hidden», «webkitHidden», «mozHidden», «msHidden».

Событие visibilitychange, в зависимости от браузера, называется «visibilitychange», «webkitvisibilitychange», «mozvisibilitychange», «msvisibilitychange».

Вот такие дела. Поэтому придется использовать цепочки проверок.

function getPageHidden() { return 'hidden' in document ? document.hidden : 'mozHidden' in document ? document.mozHidden : 'webkitHidden' in document ? document.webkitHidden : 'msHidden' in document ? document.msHidden: false; }
function getPageVisibilityState() { return 'visibilityState' in document ? document.visibilityState : 'mozVisibilityState' in document ? document.mozVisibilityState : 'webkitVisibilityState' in document ? document.webkitVisibilityState : 'msVisibilityState' in document ? document.msVisibilityState: "visible"; }
function getPageVisibilityEvent() { return 'hidden' in document ? 'visibilitychange' : 'mozHidden' in document ? 'mozvisibilitychange' : 'webkitHidden' in document ? 'webkitvisibilitychange' : 'msHidden' in document ? 'msvisibilitychange': undefined; }

Но по большому счету, ничего сложного в этом нет.

#javascript, #html5