Метод requestFullscreen()
Пример
Показать элемент "видео" в полноэкранном режиме:
/* Получите элемент, который вы хотите отобразить в полноэкранном режиме (видео в этом примере): */
var elem = document.getElementById("myvideo");
/* Когда выполняется функция openFullscreen(), откроется видео в полноэкранном режиме.
Примечание что вы должны включить префиксы для разных браузеров, поскольку они еще не поддерживают свойство requestFullscreen*/
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.mozRequestFullScreen) { /* Firefox */
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen)
{ /* Chrome, Safari и Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE/Edge */
elem.msRequestFullscreen();
}
}
Попробуйте сами »
Дополнительные примеры "Попробуй сам" приведены ниже.
Определение и использование
Метод requestFullscreen() открывает элемент в полноэкранном режиме.
Примечание: Для работы этого метода в разных браузерах требуются определенные префиксы (см. Поддержка браузера ниже).
Совет: Используйте метод exitFullscreen отмены полноэкранного режима.
Поддержка браузера
Цифры в таблице указывают первую версию браузера, которая полностью поддерживает этот метод. Примечание: Each browser requires a specific prefix (see parentheses):
Метод | |||||
---|---|---|---|---|---|
requestFullscreen() | 15.0 (webkit) | 11.0 (ms) | 9.0 (moz) | 5.1 (webkit) | 12.10 (webkit) |
Синтаксис
HTMLElementObject.requestFullscreen()
Параметры
None |
Технические детали
Вернёт значение | Нет возвращаемого значения |
---|
Ещё примеры
Чтобы открыть HTML-страницу в полноэкранном режиме, используйте вместо document.documentElement
этот document.getElementById("element")
.
В этом примере также используется функция закрытия для закрытия полноэкранного режима:
Пример
/* Получите 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 и Opera */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen)
{ /* IE/Edge */
elem.msRequestFullscreen();
}
}
/*
Close fullscreen */
function closeFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.mozCancelFullScreen) { /* Firefox */
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen)
{ /* Chrome, Safari и Opera */
document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { /* IE/Edge */
document.msExitFullscreen();
}
}
Попробуйте сами »
Вы также можете использовать CSS для оформления страницы, когда она находится в полноэкранном режиме:
Пример
/* Chrome, Safari и Opera синтаксис */
:-webkit-full-screen {
background-color: yellow;
}
/* Firefox синтаксис */
:-moz-full-screen {
background-color: yellow;
}
/* IE/Edge синтаксис */
:-ms-fullscreen {
background-color: yellow;
}
/* Standard синтаксис */
:fullscreen {
background-color: yellow;
}
Попробуйте сами »
❮ Объект элемента