Полноэкранный веб-режим

MDN: полноэкранный API предоставляет простой способ представления веб-контента с использованием всего экрана пользователя. Этот API позволяет вам просто управлять браузером, чтобы элемент и его дочерние элементы, если они присутствуют, могли занимать весь экран, и в то же время скрыть весь пользовательский интерфейс браузера и другие приложения с экрана.

Обзор

• document.fullscreen
• document.fullscreenElement
• document.fullscreenEnabled
• elem.requestFullscreen
• document.exitFullscreen
• document.onfullscreenchange
• document.onfullscreenerror

Атрибуты

document.fullscreen

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

document.fullscreenElement

Элемент, который в данный момент активирует полноэкранный режим

document.fullscreenEnabled

Поддерживает ли текущий документ полноэкранный режим

метод

запросить полноэкранный режим

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

<video controls id="video">
  <source src="somevideo.webm"></source>
  <source src="somevideo.mp4"></source>
</video>

var elem = document.getElementById("video");
elem.addEventListener('click',function () {
	if (elem.requestFullscreen) {
    elem.requestFullscreen();
  }
});

MDN: Полноэкранные запросы должны вызываться в обработчиках событий, иначе они будут отклонены.

Выйти из полноэкранного режима

• Способ 1: нажмитеESCилиF11клавиша для выхода из полноэкранного режима
• Способ второй:[keydown event] + document.exitFullscreenПользовательская логика выхода из полноэкранного режима

// 按Enter建退出全屏
document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    document.exitFullscreen();
  }
}, false);

Примечание. Метод exitFullscreen существует только в объекте документа, а не в элементе.

мероприятие

onfullscreenchange

Событие onfullscreenchange запускается два раза: один раз при входе в полноэкранный режим, а другой — при выходе из полноэкранного режима. То есть, если состояние полноэкранного режима изменится, будет запущено событие onfullscreenchange.

document.onfullscreenchange = function ( event ) {
  console.log("全屏模式状态改变");
};

onfullscreenerror

Возникает ошибка при попытке запросить полноэкранный режим для элемента, который не поддерживает полноэкранный режим, что вызывает событие onfullscreenerror

document.onfullscreenerror = function ( event ) { 
  console.log("全屏模式失败");
};

Самый простой способ проверить событие onfullscreenerror — сделать полноэкранный запрос вне прослушивателя событий. Потому что **полноэкранный запрос должен вызываться в обработчике событий, иначе он будет отклонен. **При отклонении будет сгенерирована ошибка, эта ошибка вызовет событие onfullscreenerror

document.onfullscreenerror = function ( event ) { 
  console.log("全屏模式失败");
}; 

// requestFullscreen()将会失败，因为它在事件处理器之外
document.documentElement.requestFullscreen();

полноэкранный стиль

Gecko автоматически добавляет дополнительные стили для элементов, которые переходят в полноэкранный режим:width: 100%; height: 100%l;, цель состоит в том, чтобы он покрывал весь экран, а у webkit нет такого поведения по умолчанию, поэтому нам нужно вручную добавить этот стиль

#video:-webkit-full-screen {
  width: 100%;
  height: 100%;
}

совместимый

Сторона ПК

мобильный

приставка

Таблица 1

Таблица 2

Эпилог

Большая часть этой статьи относится к документам MDN, целью которых является организация полноэкранного веб-API, неоригинальных статей.

Оригинальный адрес:Woohoo.Guo Yunfeng.com/2018/08/15/…