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
, і якщо так, виходимо з режиму.
Порада: | З міркувань безпеки, браузери зазвичай дозволяють активацію повноекранного режиму лише як відгук на дії користувача, такі як натискання кнопки або клік мишею. |
Нотатка: | Щоб відстежувати зміни стану повноекранного режиму, можна використовувати події, такі як
У цьому прикладі ми відслідковуємо, коли користувач входить або виходить з режиму повноекранного відображення, і виводимо відповідне повідомлення. |
Порада: | Різні браузери можуть мати префіксні версії методів та властивостей для |
Синтаксис
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();
}
});