Комментарий: HTML5 запустил очень «особую» видимость страницы API. Причина, по которой это особенная, заключается в том, что этот API фокусируется на функции, на которую немногие люди обращают внимание - активируется ли тег браузера (TAB)
Здесь следует объяснить, что эта «активация» относится к тому, просматривает ли пользователь тег, или это текущий тег.
Итак, какова цель этого API? Обычно многие традиционные страницы будут продолжать работать, когда пользователь не активирует его. Например, когда пользователь просматривает портал новостей, и страница игры NBA, которую он открыл ранее, будет продолжать обновляться и получать последние результаты, веб -сайт видео будет продолжать занимать пропускную способность и загружать ресурсы. Поэтому, если потребуется слишком много ненужной работы, будет вызвано много отходов ресурсов. Поэтому это довольно полезно:
1. Веб -программа автоматически обновляет информацию о странице время от времени, чтобы убедиться, что пользователь получает своевременную информацию. Однако, когда пользователь просматривает другие страницы, его можно контролировать, чтобы приостановить обновления.
2. Когда видео -сайт воспроизводит онлайн -видео, он будет постоянно загружать видео до тех пор, пока видео не будет загружено. Однако, когда пользователь просматривает другие страницы, он может приостановить загрузку видео ресурсов для сохранения пропускной способности.
3. На главной странице веб -сайта есть большой слайд, который автоматически играет. Когда пользователь просматривает другие страницы, воспроизведение можно приостановить.
Поэтому, благодаря видимости страницы, мы можем достичь хотя бы одного или нескольких из следующих преимуществ:
1. Сохранить ресурсы сервера. Опрос Ajax часто игнорируется. Закрыть этот запрос может сохранить ресурсы.
2. Сохраните потребление памяти.
3. Сохраните потребление полосы пропускания.
Поэтому использование видимости страницы полезно как для пользователей, так и для серверов.
Далее, давайте официально представим этот API. Видимость страницы добавляет два свойства, скрытых и видимости, в объект документа браузера. Если текущий тег активируется, значение Document.hidden неверно, в противном случае истинно. Установка видимости имеет 4 возможных значения:
1. Hidden: Когда браузер минимизируется, переключает теги и блокирует экран компьютера, значение 3 -го.
2.visible: Когда документ контекста верхнего уровня браузера отображается по крайней мере на одном экране, он возвращает видимым; Когда окно браузера не сведено к минимуму, но браузер заблокирован другими приложениями, оно также видно
3. ПРЕРИНДЕНТ: Возвращает предварительную работу, когда документ загружается за пределами экрана или невидим. Это несущественное свойство, и браузер может выборочно поддерживать его.
4. Объединен: вернуть разгрузку, когда документ будет оставлен (разгрузка), а браузер также может выборочно поддерживать это свойство.
Кроме того, в документе добавляется событие VisibilityChange, которое запускается при изменении видимости документа.
Хорошо, после введения свойств, поместите пример использования (скопируйте код и сохраните его в файл HTML, переключите теги, чтобы проверить эффект после открытия).
<! Doctype html>
<html lang = "zh-cn">
<голова>
<meta charset = "utf-8" />
<title> тест HTML5 страницы API API </title>
</head>
<body> </p> <p> <div> </div>
<Скрипт>
Function browserkernel () {
var result;
['webkit', 'moz', 'o', 'ms']. foreach (function (prefix) {</p> <p> if (typeof document [prefix + 'hidden']! = 'undefined') {
result = prefix;
}
});
результат возврата;
}
function init () {
prefix = browserkernel ();
var showtip = document.getElementbyId ('showtip');
document.addeventlistener (prefix + 'visebilitychange', функция OnvisibubibyChange (e) {
var tip = null;
if (document [prefix + 'visebilitystate'] == 'hidden') tip = '<p> оставить страницу </p>';
else if (document [prefix + 'visebilitystate'] == 'visible') tip = '<p> Введите страницу </p>';
showtip.innerhtml = showtip.innerhtml + tip;
});
}
window.onload = init ();
</script>
</body>
</html>
Цель этого примера состоит в том, чтобы контролировать, изменяется ли видимость тега, и генерировать подсказку при изменении видимости тега.
Стоит отметить, что в настоящее время браузеры по -прежнему поддерживают видимость страницы через частные атрибуты. Следовательно, при обнаружении или использовании свойств, предоставляемых видимостью страницы, вам необходимо добавить частный префикс браузера. Например, при обнаружении вышеуказанного свойства видимости в Chrome вам необходимо обнаружить Document.WebKitVisabilityState вместо документа. Поэтому демонстрация сначала обнаружит тип браузера, а затем использует API видимости страницы.