requestFullscreen() — повний екран для елемента в JS
Загальний опис
requestFullscreen — це метод, який використовується для активації повноекранного режиму для конкретного елемента на вебсторінці. Виклик цього методу робить вибраний елемент (наприклад, відео, зображення або контейнер) повноекранним, займаючи весь екран пристрою користувача. Ця функція часто використовується для відеоплеєрів, презентацій, слайдшоу тощо, щоб покращити сприйняття контенту без зайвих елементів сторінки.
Для активації повноекранного режиму необхідно викликати requestFullscreen на DOM-елементі, який ми хочемо відобразити у цьому режимі. Наприклад:
document.getElementById("myElement").requestFullscreen();
Цей код намагається зробити елемент з ідентифікатором myElement повноекранним. Оскільки повноекранний режим може бути нав’язливим для користувача, браузери вимагають, щоб requestFullscreen викликався лише в результаті взаємодії користувача (наприклад, натискання кнопки). Якщо метод викликається автоматично або без взаємодії, браузер заблокує цей запит.
Метод повертає об’єкт Promise, що дозволяє обробляти результат успішного перемикання або помилку. Наприклад:
element.requestFullscreen().then(() => {
console.log("Повноекранний режим увімкнено");
}).catch((error) => {
console.log("Помилка при перемиканні у повноекранний режим:", error);
});
Під час роботи у повноекранному режимі можна відстежувати зміни стану за допомогою подій fullscreenchange і fullscreenerror. Подія fullscreenchange викликається кожного разу, коли браузер переходить або виходить із повноекранного режиму, дозволяючи відповідним чином оновлювати інтерфейс.
Слід зауважити, що requestFullscreen підтримується не у всіх браузерах і може потребувати префіксів (webkitRequestFullscreen для Safari або mozRequestFullScreen для старих версій Firefox). Щоб забезпечити кросбраузерну підтримку, можна створити функцію:
function goFullscreen(element) {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
}
}
Таким чином, requestFullscreen дозволяє зручно інтегрувати повноекранний режим для будь-якого елемента, підвищуючи якість взаємодії користувача із сайтом або застосунком.
- Порада
-
Не використовуйте повноекранний режим для нав’язливих елементів, як-от реклами. Користувачі можуть заблокувати його через безпекові налаштування браузера, тому важливо, щоб ця функція використовувалася лише для покращення користувацького досвіду.
автор: Bond - Порада
-
Обробляйте помилки через
автор: Bondcatch, оскільки у випадку блокування запиту браузером або інших помилок корисно надати повідомлення користувачу про недоступність функції або можливу помилку. - Порада
-
Щоб відстежити, коли користувач вийшов з повноекранного режиму, використовуйте подію
автор: Bondfullscreenchange. Це дозволяє динамічно оновлювати інтерфейс або приховувати непотрібні елементи після завершення повноекранного режиму.
Синтаксис
element.requestFullscreen();Повернення
Promise-
Повертає
автор: BondPromise, який виконується (resolve) у разі успішного переходу в режим повного екрану або відхиляється (reject), якщо перехід не вдалося здійснити.
Переглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 71 | 64 | 16.4 | 58 | 79 | 11* |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 71 | 71 | 64 | 16.4* |
Приклади
+ запропонувати свій приклад у пісочниці
Цей приклад показує, як активувати повноекранний режим для галереї зображень. Під час роботи у повноекранному режимі текст кнопки змінюється на "Вийти з повного екрану". Якщо користувач вийде з повноекранного режиму, текст автоматично повертається на початковий.
HTML
<img id="imageGallery" src="/img/logo.svg" width="100" alt="Демонстраційне зображення">
<div id="galleryFullscreen">Демонстраційний елемент</div>JS
const gallery = document.getElementById("imageGallery");
const fullscreenButton = document.getElementById("galleryFullscreen");
fullscreenButton.addEventListener("click", () => {
gallery.requestFullscreen()
.then(() => {
fullscreenButton.textContent = "Вийти з повного екрану";
})
.catch((error) => {
alert("Повноекранний режим недоступний.");
console.error(error);
});
});
document.addEventListener("fullscreenchange", () => {
if (!document.fullscreenElement) {
fullscreenButton.textContent = "Переглянути галерею на весь екран";
}
});HTML
<header>
<h2 class="title">requestFullscreen</h2>
<p class="description">Перемикає зображення у повноекранний режим для кращого перегляду.</p>
</header>
<main>
<div class="result">
<div id="gallery">
<img class="thumbnail" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Image 1">
<img class="thumbnail" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Image 2">
<img class="thumbnail" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Image 3">
<img class="thumbnail" src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 40 40' preserveAspectRatio='none'%3E%3Crect width='40' height='40' fill='%23264653'/%3E%3Cpath d='M0 40 12 18 22 30 30 22 40 40Z' fill='%232a9d8f'/%3E%3Ccircle cx='30' cy='9' r='5' fill='%23e9c46a'/%3E%3C/svg%3E" alt="Image 4">
</div>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
header h2.title {
padding-bottom: 15px;
border-bottom: 1px solid #999;
}
header p.description {
font-style: italic;
color: #222;
}
.result {
background-color: #f8f8f8;
padding: 15px;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
text-align: center;
}
#gallery {
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.thumbnail {
margin: 10px;
cursor: pointer;
transition: transform 0.2s;
}
.thumbnail:hover {
transform: scale(1.1);
}JS
const thumbnails = document.querySelectorAll('.thumbnail');
const fullscreenBtn = document.getElementById('fullscreenBtn');
let currentImage = null;
thumbnails.forEach(thumbnail => {
thumbnail.addEventListener('click', () => {
currentImage = thumbnail.cloneNode(); // Клонуємо зображення
currentImage.classList.remove('thumbnail'); // Видаляємо клас для зменшення розміру
currentImage.style.width = '100%'; // Розширюємо на весь екран
document.body.appendChild(currentImage); // Додаємо зображення до body
currentImage.requestFullscreen().catch(err => {
console.error("Помилка при переході в повноекранний режим:", err);
});
currentImage.addEventListener('click', () => {
document.exitFullscreen(); // Вихід з повноекранного режиму
document.body.removeChild(currentImage); // Видалити зображення з body
});
});
});
//# sourceURL=pen.jsHTML
<video id="myVideo" width="320" height="180" controls poster="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='180' viewBox='0 0 64 36' preserveAspectRatio='none'%3E%3Crect width='64' height='36' fill='%23264653'/%3E%3Ccircle cx='32' cy='18' r='10' fill='%23e9c46a'/%3E%3Cpath d='M29 12 38 18 29 24Z' fill='%23264653'/%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>
<div id="enterFullscreen">Демонстраційний елемент</div>JS
const videoElement = document.getElementById("myVideo");
const fullscreenButton = document.getElementById("enterFullscreen");
fullscreenButton.addEventListener("click", () => {
videoElement.requestFullscreen().then(() => {
console.log("Відео в повноекранному режимі");
}).catch((error) => {
console.error("Не вдалося увімкнути повний екран:", error);
});
});Коментарі
Коментарів ще немає — будьте першим!