JS властивість Fullscreen.fullscreenEnabled

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

fullscreenEnabled - властивість об’єкта document, яка перевіряє, чи дозволяє браузер ввімкнути режим повного екрану. Це булева властивість, яка повертає true, якщо користувацький агент (браузер) підтримує і дозволяє повноекранний режим, і false, якщо цей режим недоступний. Важливо розуміти, що fullscreenEnabled не вмикає режим повного екрану сам по собі, а лише вказує на його доступність.

Цю властивість часто використовують, коли потрібно визначити, чи можливо для поточного браузера або середовища активувати повноекранний режим. Наприклад, перед тим, як спробувати активувати повноекранний режим, програміст може перевірити document.fullscreenEnabled, щоб уникнути помилок у браузерах або середовищах, де ця функція не підтримується. Якщо значення true, можна викликати метод requestFullscreen(), щоб зробити певний елемент (або всю сторінку) повноекранним. Якщо значення false, то викликати метод не варто, і замість цього можна попередити користувача про неможливість переходу в повноекранний режим.

Приклад:

if (document.fullscreenEnabled) {
   document.documentElement.requestFullscreen();
} else {
   console.log("Режим повного екрану не підтримується в цьому браузері.");
}

У наведеному коді перевірка document.fullscreenEnabled визначає, чи слід ініціювати повноекранний режим. Якщо значення false, можна відобразити відповідне повідомлення, вказавши на відсутність підтримки.

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

Порада:	Коли ви тестуєте ваш код, враховуйте, що `fullscreenEnabled` може працювати по-різному в приватному режимі браузера. В деяких випадках режим повного екрану блокується саме у приватному режимі, і властивість повертатиме `false`.
Порада:	Не забувайте, що `fullscreenEnabled` слід використовувати разом з подіями, щоб відслідковувати будь-які зміни у повноекранному режимі. За допомогою `fullscreenchange` ви можете відслідкувати вхід та вихід із повноекранного режиму, що дає можливість додатково адаптувати інтерфейс у режимі реального часу.
Порада:	Оскільки `fullscreenEnabled` не активує режим повного екрану, використовуйте його перед викликом `requestFullscreen()`, щоб уникнути непотрібних помилок у середовищах без підтримки повноекранного режиму. Це забезпечує стабільну роботу вашого коду і полегшує обробку винятків.

Синтаксис

document.fullscreenEnabled

Значення

Return

Переглядачі

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

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

Переглядач
	-	-

Приклади

Цей код спочатку перевіряє, чи підтримується повноекранний режим за допомогою document.fullscreenEnabled. Якщо підтримка є, користувачу доступна кнопка для переходу в повноекранний режим. В іншому випадку кнопка деактивується і показує повідомлення про недоступність режиму. При натисканні кнопки toggleFullscreen сторінка перемикає повноекранний режим, і текст кнопки змінюється відповідно до поточного стану.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/YzmOQoa">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми активуємо повноекранний режим для відеоплеєра, якщо підтримка доступна. Якщо користувач переглядає сторінку у середовищі без підтримки повного екрану, помилка обробляється через catch, а помилка виводиться у консоль. Це підходить для додатків, де повноекранний режим є частиною основного інтерфейсу, як-от відеоплеєри чи ігри.

if (document.fullscreenEnabled) {
   document.querySelector("#videoPlayer").requestFullscreen().then(() => {
       console.log("Відео відтворюється в повноекранному режимі");
   }).catch((error) => {
       console.error("Неможливо активувати повноекранний режим:", error);
   });
}

Тут функція toggleFullscreen перемикає повноекранний режим для сторінки. Кнопка викликає функцію, перевіряючи підтримку режиму. Якщо поточний елемент не в повноекранному режимі, він стає повноекранним, а інакше — виходить з цього режиму.

function toggleFullscreen() {
   if (document.fullscreenEnabled) {
       if (!document.fullscreenElement) {
           document.documentElement.requestFullscreen();
       } else {
           document.exitFullscreen();
       }
   } else {
       console.log("Повноекранний режим не підтримується.");
   }
}
document.querySelector("#fullscreenBtn").addEventListener("click", toggleFullscreen);

JS довідник

JavaScript

Наповнення JS розділу