Как отследить потерю фокуса вкладки в браузере
Как отследить потерю фокуса вкладки в браузере
В современных браузерах есть очень полезный инструмент - 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, но хоть как-то позволят отследить уход пользователя с вкладки и возврат обратно.
Code (JavaScript) : Убрать нумерацию
- var param_name, event_name;
- // Универсальный обработчик
- if (typeof document.hidden!='undefined') {
- param_name='hidden';
- event_name='visibilitychange';
- }
- // Mozilla-based браузеры
- else if (typeof document.mozHidden!='undefined') {
- param_name='mozHidden';
- event_name='mozvisibilitychange';
- }
- // IE-based браузеры
- else if (typeof document.msHidden!='undefined') {
- param_name='msHidden';
- event_name='msvisibilitychange';
- }
- // WebKit-based браузеры
- else if (typeof document.webkitHidden!='undefined') {
- param_name='webkitHidden';
- event_name='webkitvisibilitychange';
- }
- // Браузер не поддерживает Page Visibility API
- else {
- param_name=false;
- window.addEventListener('focus', get_focus, false);
- window.addEventListener('blur', lost_focus, false);
- }
- // Установить обработчик события, если оно поддерживается
- if (param_name) {
- document.addEventListener(event_name, function() {
- if (document[param_name]) {
- lost_focus();
- }
- else {
- get_focus();
- }
- }, false);
- }
Code (JavaScript) : Убрать нумерацию
- // Обработчик получения фокуса
- function get_focus() {
- // Выполнить действия при активации вкладки
- }
- // Обработчик потери фокуса
- function lost_focus() {
- // Выполнить действия при уходе с вкладки
- }
Просмотров: 5845 | Комментариев: 1
Метки: JavaScript, оформление сайта
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 35,285 раз
Поблагодарили 35,285 раз
 |
2024 - ОКТЯБРЬ |  |
||||
| Пн | Вт | Ср | Чт | Пт | Сб | Вс |
| 1 | 2 | 3 | 4 | 5 | 6 | |
| 7 | 8 | 9 | 10 | 11 | 12 | 13 |
| 14 | 15 | 16 | 17 | 18 | 19 | 20 |
| 21 | 22 | 23 | 24 | 25 | 26 | 27 |
| 28 | 29 | 30 | 31 | |||
День учителя
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 360 |
 |
 |
http://www.manhunter.ru/webmas...usa_vkladki_
v_brauzere.html . Пытаюсь реализовать такое у себя на странице, хочу
вызывать событие когда был клик+переход на новую вкладку, но срабатывает
даже если и не переходить на новую вкладку. Вы не могли бы помочь
разобраться пжл?