From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- .../index.html" | 201 +++++++++++++++++++++ 1 file changed, 201 insertions(+) create mode 100644 "files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" (limited to 'files/uk/web/api/api_відображення_сторінки') diff --git "a/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" "b/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" new file mode 100644 index 0000000000..6675a3783b --- /dev/null +++ "b/files/uk/web/api/api_\320\262\321\226\320\264\320\276\320\261\321\200\320\260\320\266\320\265\320\275\320\275\321\217_\321\201\321\202\320\276\321\200\321\226\320\275\320\272\320\270/index.html" @@ -0,0 +1,201 @@ +--- +title: API відображення сторінки +slug: Web/API/API_відображення_сторінки +tags: + - API + - API відображення сторінки + - visibilityState + - visibilitychange + - відображення сторінки + - процеси скритої закладки + - фоновий режим +translation_of: Web/API/Page_Visibility_API +--- +
{{DefaultAPISidebar("Page Visibility API")}}
+ +
+ +

При перегляді сайту за допомогою вкладок існує ймовірність того, що будь-яка з веб-сторінок знаходиться в фоновому режимі і тому користувач її не бачить. API відображення сторінки надає події, які ви можете відстежити, щоб дізнатися, коли документ стає видимим або прихованим, а також дозволяє отримати поточний стан прихованості/видимості сторінки.

+ +
+

Примітка: API відображення сторінки є особливо корисним для економії ресурсів та підвищення продуктивності, дозволяючи сторінці уникнути виконання непотрібних завдань, коли документ не є видимим.

+
+ +

Коли користувач згортає вікно або перемикається на іншу вкладку, API посилає подію {{event("visibilitychange")}}, щоб передати слухачам інформацію про зміну стану сторінки. Ви можете виявити подію і виконати деякі дії або нічого не виконувати. Наприклад, якщо ваш веб-додаток програє відео, він може поставити відео на паузу, коли користувач переміщує вкладку у фоновий режим, і відновити відтворення, коли користувач повернеться до цієї вкладки. Користувач не втрачає миті у відео, звук відео не заважає аудіо в новій вкладці на передньому плані, і користувач не пропустить жодного моменту в них.

+ +

Стан видимості {{HTMLElement ("iframe")}} збігаються зі станом батьківського документа. Приховування <iframe> за допомогою властивостей CSS (таких як {{cssxref ("display", "display: none;")}}) не викликає подій видимості і не змінює стан документа, що міститься в кадрі.

+ +

Випадки використання

+ +

Розглянемо декілька прикладів використання API видимості сторінки.

+ + + +

Розробники у минулому використовували недосконалі проксі для виявлення цього. Наприклад, перегляд {{event("blur")}} і {{event("focus")}} подій на вікні допомагає зрозуміти, коли ваша сторінка не є активною, але не говорить про те, що ваша сторінка насправді прихована для користувача. API Видимість сторінки вирішує цю проблему.

+ +
+

Примітка: У той час як {{domxref ("GlobalEventHandlers.onblur", "onblur")}} та {{domxref ("GlobalEventHandlers.onfocus", "onfocus")}} скажуть вам, коли користувач перемикає вікно, але це не обов'язково означає, що воно приховано. Сторінки стають прихованими тільки тоді, коли користувач перемикає вкладки або згортає вікно браузера, що містить вкладку.

+
+ +

Політика позиціонування, як сприяння продуктивності фонової сторінки

+ +

Окремо від API відображення сторінки агенти  користувача зазвичай мають ряд власних політик для зниження впливу продуктивності фонових або прихованих вкладок. Вони можуть включати в себе:

+ + + +

Деякі процеси виключені з цього гасящего режиму. У цих випадках ви також можете використовувати API видимості сторінки, щоб зменшити вплив на продуктивність.

+ + + +

Приклад

+ +

Подивіться живий приклад (відео зі звуком).

+ +

Приклад, який призупиняє перегляд відео під час перемиканні на іншу вкладку і відтворює його знову при поверненні на цю вкладку, був створений за таким кодом:

+ +
   // Встановіть ім'я властивості hidden і події зміни для видимості.
+
+var hidden, visibilityChange;
+if (typeof document.hidden !== "undefined") { // Opera 12.10 і Firefox 18 і більше пізніша підтримка
+  hidden = "hidden";
+  visibilityChange = "visibilitychange";
+} else if (typeof document.msHidden !== "undefined") {
+  hidden = "msHidden";
+  visibilityChange = "msvisibilitychange";
+} else if (typeof document.webkitHidden !== "undefined") {
+  hidden = "webkitHidden";
+  visibilityChange = "webkitvisibilitychange";
+}
+
+var videoElement = document.getElementById("videoElement");
+
+// Якщо сторінка прихована, зупиніть відео;
+// Якщо сторінка відображається, відтворіть відеозображення;
+
+function handleVisibilityChange() {
+  if (document[hidden]) {
+    videoElement.pause();
+  } else {
+    videoElement.play();
+  }
+}
+
+      // Попереджаємо, якщо браузер не підтримує addEventListener або Page Visibility API
+if (typeof document.addEventListener === "undefined" || hidden === undefined) {
+  console.log("Для цього демонстрування потрібен браузер, наприклад, Google Chrome або Firefox, який підтримує API для перегляду сторінок.");
+} else {
+      // Зміна видимості сторінки
+  document.addEventListener(visibilityChange, handleVisibilityChange, false);
+
+     // Коли відео призупиняється, встановлюємо назву.
+     // Це свідчитеме про паузу.
+  videoElement.addEventListener("pause", function(){
+      document.title = 'Paused';
+  }, false);
+
+  // Коли відео відтворюється, встановлюємо назву.
+  videoElement.addEventListener("play", function(){
+      document.title = 'Playing';
+  }, false);
+
+}
+
+ +

Властивості, використані в інтерфейсі документа

+ +

API Видимість сторінки додає наступні властивості до інтерфейсу {{domxref("Document")}} :

+ +
+
{{domxref("Document.hidden")}} {{ReadOnlyInline}}
+
Повертає true , якщо сторінка знаходиться в стані, яке вважається прихованим для користувача, і false якщо навпаки.
+
{{domxref("Document.visibilityState")}} {{ReadOnlyInline}}
+
 {{domxref ("DOMString")}} вказує на поточний стан видимості документа. Можливі значення: +
+
visible
+
Зміст сторінки може бути, принаймні, частково видимим. На практиці це означає, що сторінка є закладкою на передньому плані немінімізірованного вікна.
+
hidden
+
Вміст сторінки не видно користувачеві або через те, що вкладка документа знаходиться в фоновому режимі, або через те, що частина вікна прихована, або через те, що екран пристрою вимкнений.
+
prerender
+
Вміст сторінки є попередніми і невидимим для користувача. Документ може буті в стані попереднього завантаження. +
Примітка: Не всі браузери підтримують попереднє завантаження.
+
+
unloaded
+
Сторінка перебуває в процесі вивантаження з пам'яті. +
Примітка: Не всі браузери підтримують це значення.
+
+
+
+
{{domxref("Document.onvisibilitychange")}}
+
 {{domxref("EventListener")}} задає код, який буде викликатися при виникненні події {{event("visibilitychange")}} .
+
+ +
//startSimulation та pauseSimulation визначені в іншому місці
+function handleVisibilityChange() {
+  if (document.hidden) {
+    pauseSimulation();
+  } else  {
+    startSimulation();
+  }
+}
+
+document.addEventListener("visibilitychange", handleVisibilityChange, false);
+
+ +

Специфікації

+ + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('Page Visibility API')}}{{Spec2('Page Visibility API')}}Початкове значення.
+ +

Працює з браузерами

+ +
+

Document.visibilityState

+ +
+ + +

{{Compat("api.Document.visibilityState")}}

+
+
+ +

Дивись також

+ + -- cgit v1.2.3-54-g00ecf