fullscreenEnabled — чи дозволено повний екран у браузері
Загальний опис
fullscreenEnabled - властивість об’єкта document, яка перевіряє, чи дозволяє браузер ввімкнути режим повного екрану. Це булева властивість, яка повертає true, якщо користувацький агент (браузер) підтримує і дозволяє повноекранний режим, і false, якщо цей режим недоступний. Важливо розуміти, що fullscreenEnabled не вмикає режим повного екрану сам по собі, а лише вказує на його доступність.
Цю властивість часто використовують, коли потрібно визначити, чи можливо для поточного браузера або середовища активувати повноекранний режим. Наприклад, перед тим, як спробувати активувати повноекранний режим, програміст може перевірити document.fullscreenEnabled, щоб уникнути помилок у браузерах або середовищах, де ця функція не підтримується. Якщо значення true, можна викликати метод requestFullscreen(), щоб зробити певний елемент (або всю сторінку) повноекранним. Якщо значення false, то викликати метод не варто, і замість цього можна попередити користувача про неможливість переходу в повноекранний режим.
Приклад:
if (document.fullscreenEnabled) {
document.documentElement.requestFullscreen();
} else {
console.log("Режим повного екрану не підтримується в цьому браузері.");
}
У наведеному коді перевірка document.fullscreenEnabled визначає, чи слід ініціювати повноекранний режим. Якщо значення false, можна відобразити відповідне повідомлення, вказавши на відсутність підтримки.
fullscreenEnabled корисний для розробників, оскільки не всі браузери або пристрої підтримують режим повного екрану однаково, а властивість дозволяє перевірити це, що особливо важливо для додатків, які залежать від максимального розміру екрану, таких як відеоплеєри, інтерактивні презентації або ігри.
- Порада
-
Коли ви тестуєте ваш код, враховуйте, що
автор: BondfullscreenEnabledможе працювати по-різному в приватному режимі браузера. В деяких випадках режим повного екрану блокується саме у приватному режимі, і властивість повертатимеfalse. - Порада
-
Не забувайте, що
автор: BondfullscreenEnabledслід використовувати разом з подіями, щоб відслідковувати будь-які зміни у повноекранному режимі. За допомогоюfullscreenchangeви можете відслідкувати вхід та вихід із повноекранного режиму, що дає можливість додатково адаптувати інтерфейс у режимі реального часу. - Порада
-
Оскільки
автор: BondfullscreenEnabledне активує режим повного екрану, використовуйте його перед викликомrequestFullscreen(), щоб уникнути непотрібних помилок у середовищах без підтримки повноекранного режиму. Це забезпечує стабільну роботу вашого коду і полегшує обробку винятків.
Синтаксис
document.fullscreenEnabledПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 71 | 64 | 16.4 | 58 | 12 | 11* |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 71 | 71 | 64 | 16.4* |
Приклади
+ запропонувати свій приклад у пісочниці
Цей код спочатку перевіряє, чи підтримується повноекранний режим за допомогою document.fullscreenEnabled. Якщо підтримка є, користувачу доступна кнопка для переходу в повноекранний режим. В іншому випадку кнопка деактивується і показує повідомлення про недоступність режиму. При натисканні кнопки toggleFullscreen сторінка перемикає повноекранний режим, і текст кнопки змінюється відповідно до поточного стану.
HTML
<header>
<h2 class="title">fullscreenEnabled</h2>
<p class="description">Перевіряє, чи підтримує браузер режим повного екрану</p>
</header>
<main>
<div class="result">
<p id="fullscreenStatus">Режим повного екрану доступний: <span id="status"></span></p>
<button id="toggleFullscreen">Перейти в повноекранний режим</button>
</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);
}
button#toggleFullscreen {
margin-top: 10px;
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}JS
document.addEventListener("DOMContentLoaded", () => {
const statusElement = document.getElementById("status");
const toggleButton = document.getElementById("toggleFullscreen");
// Перевірка підтримки повноекранного режиму
if (document.fullscreenEnabled) {
statusElement.textContent = "Так";
} else {
statusElement.textContent = "Ні";
toggleButton.disabled = true;
toggleButton.textContent = "Повноекранний режим недоступний";
return; // Вихід, якщо режим недоступний
}
// Функція для перемикання повноекранного режиму
function toggleFullscreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen().
then(() => {
toggleButton.textContent = "Вийти з повноекранного режиму";
}).
catch(error => {
console.error("Помилка активації повноекранного режиму:", error);
});
} else {
document.exitFullscreen().
then(() => {
toggleButton.textContent = "Перейти в повноекранний режим";
}).
catch(error => {
console.error("Помилка виходу з повноекранного режиму:", error);
});
}
}
// Додавання обробника події для кнопки
toggleButton.addEventListener("click", toggleFullscreen);
// Відстеження зміни стану повноекранного режиму
document.addEventListener("fullscreenchange", () => {
if (!document.fullscreenElement) {
toggleButton.textContent = "Перейти в повноекранний режим";
}
});
});
//# sourceURL=pen.jsТут функція toggleFullscreen перемикає повноекранний режим для сторінки. Кнопка викликає функцію, перевіряючи підтримку режиму. Якщо поточний елемент не в повноекранному режимі, він стає повноекранним, а інакше — виходить з цього режиму.
HTML
<button id="fullscreenBtn">На весь екран</button>JS
function toggleFullscreen() {
if (document.fullscreenEnabled) {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
} else {
console.log("Повноекранний режим не підтримується.");
}
}
document.querySelector("#fullscreenBtn").addEventListener("click", toggleFullscreen);HTML
<video id="videoPlayer" 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>JS
if (document.fullscreenEnabled) {
document.querySelector("#videoPlayer").requestFullscreen().then(() => {
console.log("Відео відтворюється в повноекранному режимі");
}).catch((error) => {
console.error("Неможливо активувати повноекранний режим:", error);
});
}Коментарі
Коментарів ще немає — будьте першим!