Статьи

Как использовать полноэкранный API HTML5

Декабрь 29, 2018

Обновление: эта статья устарела. Пожалуйста, смотрите обновленную версию, Как использовать полноэкранный API HTML5 (снова) .

Flash предлагал полноэкранный режим в течение многих лет, но до сих пор производители браузеров отказывались от этой функции. Основная причина: безопасность. Если вы можете заставить приложение работать в полноэкранном режиме, пользователь теряет свой браузер, панель задач и стандартные элементы управления операционной системы. Они могут быть не в состоянии закрыть окно или, что еще хуже, злобные разработчики могут эмулировать ОС и обманывать пользователей, передавая пароли, данные кредитной карты и т. Д.

На момент написания статьи полноэкранный API HTML5 был реализован в Firefox, Chrome и Safari. Mozilla предоставляет хорошие кросс-браузерные данные, но стоит отметить, что спецификации и детали реализации могут измениться.

В отличие от нажатия клавиши F11, чтобы вывести браузер в полноэкранный режим, API устанавливает полноэкранный режим для одного элемента. Он предназначен для изображений, видео и игр с использованием элемента canvas. Как только элемент переходит в полноэкранный режим, временно появляется сообщение, информирующее пользователя о том, что он может в любой момент нажать ESC, чтобы вернуться в оконный режим.

Основные свойства, методы и стили:

element.requestFullScreen ()
Делает отдельный элемент полноэкранным, например, document.getElementById («myvideo»). RequestFullScreen ().

document.cancelFullScreen ()
Выход из полноэкранного режима и возврат к просмотру документа.

document.fullScreen
Возвращает true, если браузер находится в полноэкранном режиме.

:полноэкранный
Псевдокласс CSS, который применяется к элементу, когда он находится в полноэкранном режиме.

Префикс Vexing Vendor

Не пытайтесь использовать эти имена API. Для обоих свойств CSS и JavaScript вам потребуются префиксы вендоров:

стандарт Chrome / Safari Fire Fox
.requestFullScreen () .webkitRequestFullScreen () .mozRequestFullScreen ()
.cancelFullScreen () .webkitCancelFullScreen () .mozCancelFullScreen ()
.полноэкранный .webkitIsFullScreen .mozfullScreen
:полноэкранный : -Webkit-полноэкранное : -Moz-полноэкранное

В Internet Explorer или Opera пока нет поддержки, но я бы посоветовал вам использовать префиксы «ms» и «o» для проверки будущего.

На демонстрационной странице я разработал функцию, которая обрабатывает префикс shenanigans для вас: 


var pfx = ["webkit", "moz", "ms", "o", ""];
function RunPrefixMethod(obj, method) {
	
	var p = 0, m, t;
	while (p < pfx.length && !obj[m]) {
		m = method;
		if (pfx[p] == "") {
			m = m.substr(0,1).toLowerCase() + m.substr(1);
		}
		m = pfx[p] + m;
		t = typeof obj[m];
		if (t != "undefined") {
			pfx = [pfx[p]];
			return (t == "function" ? obj[m]() : obj[m]);
		}
		p++;
	}

}

Затем мы можем сделать любой элемент видимым в полноэкранном режиме, добавив функцию-обработчик, которая определяет, находится ли он уже в полноэкранном режиме, и действует соответственно: 

 
var e = document.getElementById("fullscreen");

e.onclick = function() {

	if (RunPrefixMethod(document, "FullScreen") || RunPrefixMethod(document, "IsFullScreen")) {
		RunPrefixMethod(document, "CancelFullScreen");
	}
	else {
		RunPrefixMethod(e, "RequestFullScreen");
	}

}

CSS

Как только браузер перейдет в полноэкранный режим, вы почти наверняка захотите изменить стили для элемента и его дочерних элементов. Например, если ваш элемент обычно имеет ширину 500 пикселей, вам нужно изменить его на 100%, чтобы он использовал доступное пространство, например 

 
#myelement
{
	width: 500px;
}

#myelement:full-screen
{
	width: 100%;
}

#myelement:full-screen img
{
	width: 100%;
}

Однако вы не можете использовать список селекторов с префиксом поставщика : 

 
/* THIS DOES NOT WORK */
#myelement:-webkit-full-screen,
#myelement:-moz-full-screen,
#myelement:-ms-full-screen,
#myelement:-o-full-screen,
#myelement:full-screen
{
	width: 100%;
}

По какой-то странной причине вы должны повторить стили в их собственных блоках, иначе они не будут применены: 

 
/* this works */
#myelement:-webkit-full-screen	{ width: 100% }
#myelement:-moz-full-screen		{ width: 100% }
#myelement:-ms-full-screen		{ width: 100% }
#myelement:-o-full-screen		{ width: 100% }
#myelement:full-screen			{ width: 100% }

Weird.

Просмотрите демонстрационную страницу в Firefox, Chrome или Safari…

Техника работает хорошо. Единственная проблема, которую я обнаружил, касается Safari на рабочем столе с двумя мониторами — он настаивает на использовании первого монитора в полноэкранном режиме, даже если браузер работает на втором экране?

Хотя, возможно, еще немного рано использовать полноэкранный режим, разработчики игр и производители видео должны следить за прогрессом.

Если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как HTML5 и CSS3 для реального мира .

Комментарии к этой статье закрыты. У вас есть вопрос о HTML5? Почему бы не спросить об этом на наших форумах ?

37
Share: