Полноэкранный режим браузера Fullscreen javascript API
При разработке WEB приложений для комфортного просмотра конента на смартфонах и планшетах часто требуется перевести браузер в режим полноэкранного отображения страницы напрямую средствами сайта и так же вернуть к режим по умолчанию. Для этого был разаботан инструмент входящий в спецификацию HTML 5 - Fullscreen javascript API.
Спецификация Fullscreen javascript API включает:
- 2 метода: requestFullScreen и cancelFullScreen
- 2 свойства объекта document: fullscreenElement и fullscreenEnabled
- 1 событие: fullscreenchange
В идеале за включение полноэкранного просмотра страницы должно отвечать одна строчка кода, но разработчики браузеров до сих пор не могут согласовать спецификацию и кросбраузерное решение возможно только с преминением префиксов.
Включить полноэкранный режим с помощью API Fullscreen javascript
document.documentElement.requestFullScreen(); // отобразить страницу в полноэкранном режиме
document.getElementById("video1").requestFullScreen(); // отобразить элемент в полноэкранном режимеВыйти из полноэкранного режима отображения страницы сайта.
document.cancelFullScreen();
Свойства объектов Fullscreen
fullscreenElement = document.fullscreenElement; // элемент который в данный момент находится в полноэкранним режиме fullscreenEnabled = document.fullscreenEnabled; // статус (true или false)
Событие API Fullscreen об изменениии режима
element.addEventListener("fullscreenchange", function(e){
console.log('статус fullscreen = ', document.fullscreenEnabled);
});Кроссбраузерное решение API Fullscreen javascript для переключения режимов полноэкранного отображения контента
//Запустить отображение в полноэкранном режиме
function launchFullScreen(element) {
if(element.requestFullScreen) {
element.requestFullScreen();
} else if(element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if(element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
}
}
// Выход из полноэкранного режима
function cancelFullscreen() {
if(document.cancelFullScreen) {
document.cancelFullScreen();
} else if(document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if(document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}
var onfullscreenchange = function(e){
var fullscreenElement =
document.fullscreenElement ||
document.mozFullscreenElement ||
document.webkitFullscreenElement;
var fullscreenEnabled =
document.fullscreenEnabled ||
document.mozFullscreenEnabled ||
document.webkitFullscreenEnabled;
console.log( 'fullscreenEnabled = ' + fullscreenEnabled, ', fullscreenElement = ', fullscreenElement, ', e = ', e);
}
// Событие об изменениии режима
el.addEventListener("webkitfullscreenchange", onfullscreenchange);
el.addEventListener("mozfullscreenchange", onfullscreenchange);
el.addEventListener("fullscreenchange", onfullscreenchange);Стилизация CSS для fullscreen API
Псевдокласс :full-screen предназначен для стилизации элементов в полноэкранном режиме.
Ниже приведен пример с префиксами -webkit- и -moz- , которые через некоторое время можно будет опустить и использовать просто :full-screen.
/* красный фон для полноэкранного режима */
:-webkit-full-screen {
background: red;
}
:-moz-full-screen {
background: red;
}
/* полноэкранное отображение <video> */
:-webkit-full-screen video {
width: 100%;
height: 100%;
}
:-moz-full-screen video {
width: 100%;
height: 100%;
}Как задействовать API Fullscreen javascript через IFRAME?
Часто необходимо вывести контент в полноэкранном режиме транслируемый через IFRAME, например полноэкранное видео. Для этого необходимо добавить аттрибут allowfullscreen к элементу iframe. Не забываем о префиксах.
<iframe webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" src="http://google.com" />
Ещё один переключатель полноэкранного режима браузера
function toggleFullScreen() {
var doc = window.document;
var docEl = doc.documentElement;
var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen;
var cancelFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen;
if(!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement) {
requestFullScreen.call(docEl);
}
else {
cancelFullScreen.call(doc);
}
}Для упрощения разработки можно использовать хороший общий API от Синдре Сорхуса (Sindre Sorhus) — модуль Screenfull.js, который объединяет два немного разных JS API и вендорные префиксы в один последовательный API.
Дата публикации:В этом посте частично был использован материал сайта © https://www.frontender.info/fullscreen/
ТОП 10 случайных публикаций
Последние публикации
