Частенько бывает нужно узнать, просматривает ли в данный момент пользователь вашу страницу сайта или он находится на другой вкладке. То есть, находится ли сейчас ваша страница сайта в активной вкладке и можно что-то показывать пользователю или нужно ждать пока тот не обратит внимание на вашу страницу.
Например это может пригодиться в таких случаях:
- На странице сайта есть видеоролик и нам нужно устанавливать его на паузу всякий раз, когда вкладка браузера становиться неактивной и продолжать проигрывать если вкладка становится активной;
- Можно изменять favicon страницы, если она скрыта;
- Оповещать пользователя о событиях на сайте, если он находится в неактивной вкладке.
Для этих целей в 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 – содержит состояние вкладки и может принимать три значения:
- visible – вкладка активна и пользователь может видеть вашу страницу;
- hidden – вкладка неактивна и пользователь смотрит куда-то в другое место;
- 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; }Но по большому счету, ничего сложного в этом нет.