<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>
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);
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;
box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
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;
}
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 = "Перейти в повноекранний режим";
}
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.