JS метод Fullscreen.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));