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();
}
});