Blog. Just Blog

Как отследить потерю фокуса вкладки в браузере

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Как отследить потерю фокуса вкладки в браузере
Как отследить потерю фокуса вкладки в браузере

В современных браузерах есть очень полезный инструмент - Page Visibility API. Он позволяет узнать, когда вкладка с веб-страницей видна пользователю, а когда пользователь находится на другой странице. Через Page Visibility API можно установить обработчик для реагирования на изменение состояния видимости. Для чего это надо? Например, если сайт открыт на мобильных устройствах, то при переходе на другую вкладку есть смысл отключить ненужные сетевые запросы, всякие спецэффекты, динамическое обновление контента и прочие ресурсоемкие операции. В веб-приложениях, например, можно сделать автоматическое сохранение незаполненной формы при переходе на другую вкладку. На моем сайте при потере фокуса вкладки активируется опция "камуфляж".

За время становления Page Visibility API он претерпел много изменений, в частности переход от специфических браузерных событий и наименований их параметров на универсальное событие visibilitychange. В случае универсального события оно будет влиять на два атрибута объекта document - hidden и visibilityState. Если страницу в текущий момент не видно, то есть пользователь перешел в браузере на другую вкладку, значение hidden становится true. Если атрибут hidden имеет значение false, значит вкладка с веб-страницей сейчас открыта и активна.

Чтобы добиться максимальной совместимости, надо будет учитывать браузеры прошлых версий, где Page Visibility API был реализован через браузерные префиксы. Для совсем древних браузеров, в которых Page Visibility API нет вообще, придется частично сэмулировать его через обработчики событий focus и blur, назначенные объекту window. Они хоть и не абсолютно точно повторят функционал Page Visibility API, но хоть как-то позволят отследить уход пользователя с вкладки и возврат обратно.
  1. var param_nameevent_name;
  2. // Универсальный обработчик
  3. if (typeof document.hidden!='undefined') {
  4.     param_name='hidden';
  5.     event_name='visibilitychange';
  6. }
  7. // Mozilla-based браузеры
  8. else if (typeof document.mozHidden!='undefined') {
  9.     param_name='mozHidden';
  10.     event_name='mozvisibilitychange';
  11. }
  12. // IE-based браузеры
  13. else if (typeof document.msHidden!='undefined') {
  14.     param_name='msHidden';
  15.     event_name='msvisibilitychange';
  16. }
  17. // WebKit-based браузеры
  18. else if (typeof document.webkitHidden!='undefined') {
  19.     param_name='webkitHidden';
  20.     event_name='webkitvisibilitychange';
  21. }
  22. // Браузер не поддерживает Page Visibility API
  23. else {
  24.     param_name=false;
  25.     window.addEventListener('focus'get_focusfalse);
  26.     window.addEventListener('blur'lost_focusfalse);
  27. }
  28.  
  29. // Установить обработчик события, если оно поддерживается
  30. if (param_name) {
  31.     document.addEventListener(event_name, function() {
  32.         if (document[param_name]) {
  33.             lost_focus();
  34.         }
  35.         else {
  36.             get_focus();
  37.         }
  38.     }, false);
  39. }
Обработчики событий простейшие: один для выполнения действия, когда пользователь покинет вкладку, а другой для выполнения действий при возврате на страницу.
  1. // Обработчик получения фокуса
  2. function get_focus() {
  3.     // Выполнить действия при активации вкладки
  4. }
  5. // Обработчик потери фокуса
  6. function lost_focus() {
  7.     // Выполнить действия при уходе с вкладки
  8. }
Готовый пример страницы, которая реагирует на изменение видимости, вы можете посмотреть здесь. При переключении вкладок на странице будут появляться соответствующие сообщения. На мой взгляд, использование Page Visibility API - это очень хорошая практика, про которую не надо забывать.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 689 | Комментариев: 0

Комментарии

Отзывы посетителей сайта о статье
Комментариeв нет

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2017
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.09 сек. / MySQL: 2 (0.0043 сек.) / Память: 4.5 Mb
Наверх