JS властивість Event.fullscreenchange
Загальний опис
Подія fullscreenchange виникає, коли елемент входить у повноекранний режим або виходить з нього. Ця подія дозволяє відслідковувати зміни в стані повноекранного режиму і реагувати на них відповідно. Це корисно для додатків, які використовують повноекранний режим, таких як відеоплеєри або інтерактивні графічні інтерфейси, де важливо знати, коли сторінка або елемент переходить у повноекранний режим або залишає його.
Для того щоб викликати повноекранний режим, використовується метод requestFullscreen() на елементі, наприклад:
const element = document.getElementById('myElement');
element.requestFullscreen();
Коли елемент переходить у повноекранний режим, спрацьовує подія fullscreenchange. Ви можете додати обробник цієї події на document або безпосередньо на конкретний елемент, щоб реагувати на зміну стану.
Приклад додавання обробника:
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) {
console.log('Елемент увійшов у повноекранний режим:', document.fullscreenElement);
} else {
console.log('Вийшли з повноекранного режиму');
}
});
У цьому прикладі, коли сторінка входить або виходить із повноекранного режиму, у консоль виводиться відповідне повідомлення. Змінну document.fullscreenElement можна використовувати для перевірки, який елемент зараз знаходиться в повноекранному режимі.
Подія fullscreenchange корисна, коли потрібно змінювати інтерфейс відповідно до режиму екрану. Наприклад, ви можете приховувати або змінювати певні елементи, щоб вони не заважали під час повноекранного перегляду, або навпаки — додавати нові елементи для кращого контролю.
Для виходу з повноекранного режиму використовується метод document.exitFullscreen(), і після цього також спрацює подія fullscreenchange.
Завдяки події fullscreenchange можна ефективно управляти поведінкою інтерфейсу користувача, забезпечуючи комфортні умови для роботи в різних режимах.
- Порада
-
Важливо перевіряти підтримку повноекранного режиму в різних браузерах. Не всі браузери однаково обробляють цю функцію, тому варто передбачити поліфіли або перевірку наявності
автор: BondrequestFullscreen()іexitFullscreen()методів. - Порада
-
У складних інтерфейсах можна використовувати
автор: Bondfullscreenchangeдля зміни розмірів і адаптації контенту під новий режим. Наприклад, при виході з повноекранного режиму можна повернути елементу його оригінальний розмір або структуру, що змінювалася в процесі. - Порада
-
Якщо ви хочете знати, який саме елемент знаходиться в повноекранному режимі, використовуйте змінну
автор: Bonddocument.fullscreenElement. Вона допоможе вам ідентифікувати елемент і динамічно змінювати його параметри.
Синтаксис
document.addEventListener('fullscreenchange', function(event) {
// Код, що виконується при спрацюванні події
});Переглядачі
| Переглядач |  |
 |
 |
 |
 |
|---|---|---|---|---|---|
| 66 | 57 | 11.1 | 53 | 16 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 66 | 66 | 57 | 11.3 |
| Переглядач |  |
 |
|---|---|---|
| 15.0.0 | 1.0 |
Приклади
+ запропонувати свій приклад у пісочниці
Користувач взаємодіє з кнопкою, яка дозволяє перемикати елемент у повноекранний режим та виходити з нього. Коли елемент входить у повноекранний режим, відбувається зміна його розмірів та стилів за допомогою додавання класу fullscreen-mode. Подія fullscreenchange дозволяє динамічно змінювати текст кнопки, залежно від поточного стану повноекранного режиму.
HTML
<header>
<h2 class="title">HTML Events: fullscreenchange</h2>
<p class="description">Ця подія виникає, коли елемент входить або виходить з повноекранного режиму.</p>
</header>
<main>
<div class="result">
<!-- Кнопка для входу в повноекранний режим -->
<button id="fullscreenButton">Перейти в повноекранний режим</button>
<!-- Елемент, який стане повноекранним -->
<div id="fullscreenElement" class="fullscreen-box">
<p>Цей блок буде показано у повноекранному режимі.</p>
</div>
</div>
</main>CSS
body {
font-size: 16px;
line-height: 1.5;
font-family: monospace;
}
header {
background-color: #f1f1f1;
margin-bottom: 25px;
padding: 15px;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
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;
-webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
-moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}
.fullscreen-box {
width: 300px;
height: 200px;
background-color: #ddd;
padding: 20px;
text-align: center;
border: 2px solid #333;
transition: width 0.3s ease, height 0.3s ease;
}
.fullscreen-box.fullscreen-mode {
width: 100%;
height: 100%;
background-color: #333;
color: #fff;
}JS
// Елементи з DOM
const fullscreenButton = document.getElementById('fullscreenButton');
const fullscreenElement = document.getElementById('fullscreenElement');
// Обробник події для входу/виходу в повноекранний режим
fullscreenButton.addEventListener('click', function () {
if (!document.fullscreenElement) {
fullscreenElement.requestFullscreen().
catch(err => console.error(`Помилка входу в повноекранний режим: ${err}`));
} else {
document.exitFullscreen().
catch(err => console.error(`Помилка виходу з повноекранного режиму: ${err}`));
}
});
// Відслідковування події fullscreenchange
document.addEventListener('fullscreenchange', function () {
if (document.fullscreenElement) {
fullscreenElement.classList.add('fullscreen-mode');
fullscreenButton.textContent = 'Вийти з повноекранного режиму';
} else {
fullscreenElement.classList.remove('fullscreen-mode');
fullscreenButton.textContent = 'Перейти в повноекранний режим';
}
});
//# sourceURL=pen.jsЦей приклад демонструє, як при вході в повноекранний режим змінюється фон сторінки на чорний для покращення фокусування користувача на контенті. Після виходу з повноекранного режиму фон повертається до білого. Це зручно для додатків, що потребують динамічної адаптації інтерфейсу під повноекранний режим.
document.addEventListener('fullscreenchange', function() {
if (document.fullscreenElement) {
document.body.style.backgroundColor = 'black';
console.log('Екран у повноекранному режимі, змінено фон сторінки на чорний');
} else {
document.body.style.backgroundColor = 'white';
console.log('Вихід з повноекранного режиму, фон сторінки змінено на білий');
}
});HTML
<video id="videoControls" 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 320 180'%3E%3Crect width='320' height='180' fill='%23264653'/%3E%3Cpath d='M138 62 192 90 138 118Z' fill='%23e9c46a'/%3E%3Ctext x='160' y='152' font-family='sans-serif' font-size='15' text-anchor='middle' fill='%23e9c46a'%3Eмедіафайла немає%3C/text%3E%3C/svg%3E">
Ваш браузер не відтворює відео.
</video>JS
document.addEventListener('fullscreenchange', function() {
if (!document.fullscreenElement) {
document.getElementById('videoControls').style.display = 'block';
console.log('Відновлено видимість елементів після виходу з повноекранного режиму');
}
});Коментарі
Коментарів ще немає — будьте першим!