Раньше у нас были браузеры, в которых не было вкладок, но сегодня, когда вы просматриваете все доступные браузеры, мы видим, что все браузеры предлагают это. Будучи программистом, я обычно открываю 10-15 вкладок одновременно, иногда это число превышает 25-30.
Почему это API?
Ранее было невозможно определить, какая вкладка активна, а какая нет, но с помощью API видимости HTML5 мы можем определить, смотрит ли наш посетитель на нашу веб-страницу или нет.
В этом уроке мы поймем, как работать с HTML5 Visibility API и одной простой демонстрацией, чтобы узнать статус нашей страницы. В этой демонстрации мы изменим заголовок документа в зависимости от статуса видимости страницы.
Проверка статуса видимости страницы
С запуском этого API мы приветствовали два новых свойства документа, которые выполняют две разные функции. Первый — это document.visibilityState а второй — document.hidden .
document.visibilityState содержит четыре различных значения, как показано ниже:
- скрыто: страница не видна ни на одном экране
- prerender: страница загружена вне экрана и не видна пользователю
- видимый: страница видна
- выгружен: страница собирается к выгрузке (пользователь уходит с текущей страницы)
document.hidden является логическим свойством, которое имеет значение false, если страница видима, и true, если страница скрыта.
Теперь мы можем контролировать поведение наших сайтов, когда наш сайт скрыт от пользователя.
Мы сразу знаем о наших свойствах доступности, но теперь пришло время прослушать событие, чтобы мы могли получать уведомления о новом условии видимости страницы. Это делается через событие visibilitychange . Мы увидим краткое демо о том, как бороться с этим событием.
|
1
2
3
4
5
6
7
|
document.addEventListener(‘visibilitychange’, function(event) {
if (!document.hidden) {
// The page is visible.
} else {
// The page is hidden.
}
});
|
Этот код является просто базовым примером использования этого события и обнаружения текущего статуса веб-страницы. Но чтобы вы знали, что оба эти свойства и метод должны использоваться с префиксом поставщика, потому что эти события и свойства имеют префикс поставщика в некоторых браузерах. Теперь мы увидим тот же код в кросс-браузерной манере:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
|
// Get Browser-Specifc Prefix
function getBrowserPrefix() {
// Check for the unprefixed property.
if (‘hidden’ in document) {
return null;
}
// All the possible prefixes.
var browserPrefixes = [‘moz’, ‘ms’, ‘o’, ‘webkit’];
for (var i = 0; i < browserPrefixes.length; i++) {
var prefix = browserPrefixes[i] + ‘Hidden’;
if (prefix in document) {
return browserPrefixes[i];
}
}
// The API is not supported in browser.
return null;
}
// Get Browser Specific Hidden Property
function hiddenProperty(prefix) {
if (prefix) {
return prefix + ‘Hidden’;
} else {
return ‘hidden’;
}
}
// Get Browser Specific Visibility State
function visibilityState(prefix) {
if (prefix) {
return prefix + ‘VisibilityState’;
} else {
return ‘visibilityState’;
}
}
// Get Browser Specific Event
function visibilityEvent(prefix) {
if (prefix) {
return prefix + ‘visibilitychange’;
} else {
return ‘visibilitychange’;
}
}
|
У нас есть все свойства браузера с префиксом, и событие готово к применению. Теперь мы изменим наш предыдущий код соответственно.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);
document.addEventListener(visibilityEvent, function(event) {
if (!document[hidden]) {
// The page is visible.
} else {
// The page is hidden.
}
});
|
Где мы можем использовать этот API?
Существует ряд различных сценариев, в которых мы можем рассмотреть возможность использования этого API.
- Представьте, что вы находитесь на информационной панели страницы, а страница опрашивает сведения из какого-либо RSS-канала или API через регулярные промежутки времени, например, две минуты. Таким образом, мы можем ограничить вызов RSS-фидом или API, если страница не видна пользователю (т. Е. Пользователь фактически не просматривает страницу).
- Для слайдера и изображения. мы можем ограничить движение изображений слайдера, когда страница скрыта.
- Аналогичным образом мы можем отображать HTML-уведомления только тогда, когда страница скрыта для пользователя.
До этого момента мы видели код для использования HTML5 Page Visibility API, пришло время для некоторых действий.
демонстрация
- Демонстрация 1: эта демонстрация представляет использование API видимости страницы для изменения заголовка страницы. Посмотреть демо
- Демонстрация 2: эта демонстрация демонстрирует, как мы можем ограничить опрос данных с сервера, когда страница неактивна.
В этой демонстрации мы рассмотрим, как мы можем ограничить опрос сервера для получения свежей информации, но только тогда, когда пользователь смотрит на страницу. Я предполагаю, что jQuery уже включен в вашу страницу. Здесь мы увеличим только количество, но вместо этого его можно заменить реальным опросом сервера.
HTML
|
1
2
|
<!— This element will show updated count —>
<h1 id=»valueContainer»>0</h1>
|
JavaScript
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
<script type=»text/javascript»>
// Get Browser Prefix
var prefix = getBrowserPrefix();
var hidden = hiddenProperty(prefix);
var visibilityState = visibilityState(prefix);
var visibilityEvent = visibilityEvent(prefix);
var timer = null;
function increaseVal() {
var newVal = parseInt($(‘#valueContainer’).text()) + parseInt(1);
$(‘#valueContainer’).text(newVal);
document.title = newVal + ‘: Running’;
timer = setTimeout(function() {
increaseVal();
}, 1);
}
// Visibility Change
document.addEventListener(visibilityEvent, function(event) {
if (document[hidden]) {
clearTimeout(timer);
var val = parseInt($(‘#valueContainer’).text());
document.title = val + ‘: Pause’;
} else {
increaseVal();
}
});
increaseVal();
</script>
|
Поддержка браузера
Если вы хотите взглянуть на поддержку браузером для этого API, то я бы посоветовал посмотреть, можно ли использовать? , Но чтобы программно найти поддержку браузера, я бы предложил взять эту статью, чтобы Обнаружить поддержку различных функций HTML5 . Пока что у нас действительно хорошая поддержка этого API практически во всех основных и последних браузерах.
Вывод
Я бы сказал, что у нас был очень хороший API, который включал только два свойства и только одно событие. Таким образом, его можно легко интегрировать с существующим приложением, что может положительно повлиять на ваш пользовательский опыт. В конечном счете, теперь мы можем контролировать поведение наших веб-сайтов, когда наш веб-сайт скрыт от пользователя.