Как сделать - Полноэкранный режим
Узнать, как сделать полноэкранное окно с помощью JavaScript.
Полноэкранное окно
Как использовать JavaScript для просмотра элемента в полноэкранном режиме.
Нажмите на кнопку, чтобы открыть видео в полноэкранном режиме:
Полноэкранное видео
Чтобы открыть элемент в полноэкранном режиме, мы используем метод элемент.requestFullscreen()
:
Пример
<script>
/* Получите элемент, который вы хотите отобразить в полноэкранном режиме (видео в этом примере): */
var elem = document.getElementById("myvideo");
/* При выполнении функции open Full screen() откройте видео в полноэкранном режиме.
Примечание что мы должны включать префиксы для разных браузеров, так как они еще не поддерживают метод requestFullscreen */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
</script>
Редактор кода »
Документ в полноэкранном режиме
Чтобы открыть всю страницу в полноэкранном режиме, используйте document.documentElement
вместо document.getElementById("элемент")
. В этом примере мы также используем функцию close для закрытия полноэкранного режима:
Пример
<script>
/* Получить documentElement (<html>) для отображения страницы в полноэкранном режиме */
var elem = document.documentElement;
/* Просмотр в полноэкранном режиме */
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) { /* Chrome, Safari and Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE/Edge */
elem.msRequestFullscreen();
}
}
/* Закрыть полный экран */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) { /* Chrome, Safari and Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
}
</script>
Вы также можете использовать CSS для стилизации страницы, когда она находится в полноэкранном режиме:
Пример
/* Синтаксис Chrome, Safari и Opera */
:-webkit-full-screen {
background-color: yellow;
}
/* Синтаксис Firefox */
:-moz-full-screen {
background-color: yellow;
}
/* Синтаксис IE/Edge */
:-ms-fullscreen {
background-color: yellow;
}
/* Стандартный синтаксис */
:fullscreen {
background-color: yellow;
}
Редактор кода »
Связанные страницы
HTML DOM Справочник: Метод requestFullscreen().
HTML DOM Справочник: Метод exitFullscreen().
HTML DOM Справочник: Свойство documentElement.