exitFullscreen() — як вийти з повноекранного режиму

Загальний опис

exitFullscreen() — це метод об'єкта document, який дозволяє вийти з режиму повноекранного відображення на веб-сторінці. Коли виконується цей метод, браузер завершує повноекранний режим, повертаючи сторінку до звичайного інтерфейсу. Цей метод використовується, коли веб-додаток або сторінка, що відображається у повноекранному режимі, більше не потребує цього формату і бажано відновити звичайне відображення.

Щоб успішно завершити повноекранний режим, необхідно викликати exitFullscreen() тільки тоді, коли сторінка вже перебуває у повноекранному режимі. Спроба викликати цей метод, коли сторінка не у повноекранному режимі, не призведе до жодних змін. Якщо код працює з дозволами користувача на повноекранний режим, можна перевірити статус повноекранного режиму, використовуючи властивість document.fullscreenElement, яка поверне null, якщо повноекранний режим вимкнений.

Приклад використання:

if (document.fullscreenElement) {
  document.exitFullscreen()
    .then(() => console.log("Повноекранний режим завершено"))
    .catch((error) => console.error("Помилка при виході з повноекранного режиму:", error));
}

Цей код спочатку перевіряє, чи сторінка знаходиться у повноекранному режимі, і, якщо так, викликає exitFullscreen(), щоб завершити його. Метод повертає об’єкт Promise, що дозволяє відстежити статус виконання; якщо вихід з повноекранного режиму успішний, буде виконано функцію then(), а у випадку помилки — catch().

Зазвичай exitFullscreen() використовується разом із методами та подіями, які керують повноекранним режимом. Наприклад, requestFullscreen() використовується для ініціювання повноекранного режиму, і його можна доповнити логікою, яка автоматично викликає exitFullscreen() після завершення певного завдання або натискання кнопки. Важливо враховувати, що робота повноекранного режиму може залежати від дозволів, які надає користувач у налаштуваннях браузера, або обмежень безпеки.

правити

Порада

Якщо ваш додаток потребує вийти з повноекранного режиму після певної події, наприклад, завершення відео, прив’яжіть exitFullscreen() до відповідного слухача події. Це забезпечить, що режим вимикається автоматично, без участі користувача.

автор: Bond правити

Порада

Слідкуйте за помилками при виклику exitFullscreen(), оскільки метод повертає Promise, і ви можете обробити можливі помилки у блоці catch(). Це корисно для відстеження, якщо користувач забороняє або скасовує повноекранний режим.

автор: Bond правити

Порада

Зверніть увагу, що деякі браузери можуть обмежувати частоту використання exitFullscreen(), щоб уникнути зловживання. Використовуйте цей метод у важливих моментах взаємодії, щоб забезпечити комфортний досвід для користувача.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

document.exitFullscreen();

Повернення

Promise

Повертає об’єкт Promise. Якщо вихід з повноекранного режиму відбувається успішно, Promise переходить у стан "виконано" (resolved), і ви можете продовжити обробку подій, що йдуть після цього. Якщо виникає помилка — наприклад, через відсутність дозволів або обмеження браузера — Promise переходить у стан "відхилено" (rejected), і її можна обробити за допомогою методу catch().

Ось приклад використання для обробки успішного завершення або помилки:

document.exitFullscreen()
  .then(() => console.log("Вийшли з повноекранного режиму"))
  .catch((error) => console.error("Не вдалося вийти з повноекранного режиму:", error));

Таким чином, exitFullscreen() не повертає конкретне значення, лише статус завершення операції.

автор: Bond

правити

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	71	64	16.4	58	79	11*

Підтримка: мобільні переглядачі

Переглядач
	71	71	64	16.4*

Приклади

+ запропонувати свій приклад у пісочниці

document.documentElement.requestFullscreen()
  .then(() => {
    console.log("Ввімкнено повноекранний режим");
    setTimeout(() => {
      if (document.fullscreenElement) {
        document.exitFullscreen();
        console.log("Автоматичний вихід з повноекранного режиму через 10 секунд");
      }
    }, 10000);
  })
  .catch((error) => console.error("Помилка повноекранного режиму:", error));

document.documentElement.requestFullscreen()
  .then(() => {
    console.log("Ввімкнено повноекранний режим");
    document.addEventListener("keydown", function exitOnEscape(event) {
      if (event.key === "Escape" && document.fullscreenElement) {
        document.exitFullscreen().then(() => {
          console.log("Повноекранний режим завершено клавішею Escape");
        });
        document.removeEventListener("keydown", exitOnEscape);
      }
    });
  })
  .catch((error) => console.error("Помилка повноекранного режиму:", error));

<header>
  <h2 class="title">exitFullscreen()</h2>
  <p class="description">Завершує повноекранний режим у браузері.</p>
</header>
<main>
  <div class="result">
    <!-- Кнопка для ввімкнення повноекранного режиму -->
    <button id="enterFullscreenBtn">Ввімкнути повноекранний режим</button>
    <!-- Кнопка для виходу з повноекранного режиму -->
    <button id="exitFullscreenBtn" disabled>Вийти з повноекранного режиму</button>
    <!-- Статус повноекранного режиму -->
    <p id="status">Статус: не у повноекранному режимі</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

button {
  padding: 10px;
  margin-right: 10px;
  font-size: 14px;
  cursor: pointer;
}

button:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

#status {
  margin-top: 15px;
  font-weight: bold;
  color: #333;
}

const enterFullscreenBtn = document.getElementById("enterFullscreenBtn");
const exitFullscreenBtn = document.getElementById("exitFullscreenBtn");
const statusText = document.getElementById("status");

// Функція для ввімкнення повноекранного режиму
enterFullscreenBtn.addEventListener("click", () => {
  document.documentElement.requestFullscreen().
  then(() => {
    statusText.textContent = "Статус: у повноекранному режимі";
    enterFullscreenBtn.disabled = true;
    exitFullscreenBtn.disabled = false;
  }).
  catch(error => {
    console.error("Помилка при ввімкненні повноекранного режиму:", error);
  });
});

// Функція для виходу з повноекранного режиму
exitFullscreenBtn.addEventListener("click", () => {
  document.exitFullscreen().
  then(() => {
    statusText.textContent = "Статус: не у повноекранному режимі";
    enterFullscreenBtn.disabled = false;
    exitFullscreenBtn.disabled = true;
  }).
  catch(error => {
    console.error("Помилка при виході з повноекранного режиму:", error);
  });
});

// Відстеження змін повноекранного режиму для оновлення статусу
document.addEventListener("fullscreenchange", () => {
  if (!document.fullscreenElement) {
    statusText.textContent = "Статус: не у повноекранному режимі";
    enterFullscreenBtn.disabled = false;
    exitFullscreenBtn.disabled = true;
  }
});
//# sourceURL=pen.js