css.in.ua
Підтримати

JS об'єкт Fullscreen

Введення до об'єкта Fullscreen у JavaScript

Об'єкт Fullscreen у JavaScript – це інструмент, який дозволяє вам програмно керувати режимом повноекранного відображення на веб-сторінці. Цей режим є корисним, коли потрібно надати користувачу можливість максимізувати відображення контенту, зокрема для відео, презентацій, ігор та інших ресурсів.

Використання Fullscreen API

Перевірка підтримки Fullscreen API: Перш ніж взаємодіяти з режимом повноекранного відображення, корисно з'ясувати, чи підтримує поточний браузер Fullscreen API.

if (document.fullscreenEnabled) {
   // Браузер підтримує Fullscreen API
}

Тут ми використовуємо властивість document.fullscreenEnabled$ для перевірки підтримки Fullscreen API`.

Вхід в режим повноекранного відображення: Щоб ввімкнути режим повноекранного відображення для конкретного елемента, використовуйте метод requestFullscreen:

const element = document.getElementById("myVideo");
element.requestFullscreen();

У цьому прикладі ми вибираємо елемент з ідентифікатором "myVideo" і переводимо його в режим повноекранного відображення.

Вихід з режиму повноекранного відображення: Щоб вийти з режиму повноекранного відображення, використовуйте метод document.exitFullscreen:

if (document.fullscreenElement) {
   document.exitFullscreen();
}

Тут ми спершу перевіряємо, чи є в нас активний елемент у режимі повноекранного відображення за допомогою властивості document.fullscreenElement, і якщо так, виходимо з режиму.

Порада:

З міркувань безпеки, браузери зазвичай дозволяють активацію повноекранного режиму лише як відгук на дії користувача, такі як натискання кнопки або клік мишею.
Нотатка:

Щоб відстежувати зміни стану повноекранного режиму, можна використовувати події, такі як fullscreenchange та fullscreenerror:

document.addEventListener("fullscreenchange", function() {
   if (document.fullscreenElement) {
       console.log("Режим повноекранного відображення ввімкнено");
   } else {
       console.log("Режим повноекранного відображення вимкнено");
   }
});

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

Різні браузери можуть мати префіксні версії методів та властивостей для Fullscreen API, такі як webkitRequestFullscreen для WebKit-браузерів. Щоб забезпечити сумісність, рекомендується використовувати поліфіли або перевіряти наявність різних методів.

Синтаксис

element.requestFullscreen([options]);
document.exitFullscreen();

Переглядачі

Переглядач

71

64

16.4

58

79
Переглядач

71

71

64

12
Переглядач

0.10.0

1.0

Приклади


У цьому прикладі кнопка "enterFullscreen" викликає метод requestFullscreen для контейнера слайдів, забезпечуючи повноекранний перегляд презентації.

const slideContainer = document.getElementById("slideContainer");
const enterFullscreenButton = document.getElementById("enterFullscreen");

enterFullscreenButton.addEventListener("click", function() {
    slideContainer.requestFullscreen();
});

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

const gameCanvas = document.getElementById("gameCanvas");
const fullscreenToggle = document.getElementById("toggleFullscreen");

fullscreenToggle.addEventListener("click", function() {
    if (document.fullscreenElement) {
        document.exitFullscreen();
    } else {
        gameCanvas.requestFullscreen();
    }
});

Тут ми додаємо обробник подій до кнопки, яка переводить відео в повноекранний режим і виходить з нього. Ми перевіряємо, чи є вже елемент у повноекранному режимі, використовуючи document.fullscreenElement, і якщо так, виходимо з нього.

const videoElement = document.getElementById("videoPlayer");
const fullscreenButton = document.getElementById("fullscreenButton");

fullscreenButton.addEventListener("click", function() {
    if (document.fullscreenElement) {
        document.exitFullscreen();
    } else {
        videoElement.requestFullscreen();
    }
});

Методи

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

Властивості

fullscreenElement
Визначає, який елемент знаходиться у повноекранному режимі, або повертає `null`, якщо жоден.
fullscreenEnabled
Перевіряє, чи підтримує браузер режим повного екрану для користувача.

Спільнота

Зв'язок