Что вам нужно знать о Полный экран API 💻

Есть много ситуаций, когда мы хотели бы увидеть нашу веб-страницу в полноэкранном режиме. Будьте ИТ-игры, онлайн-курсы, видеоуроники или просто желающие больше места для чтения, читая книгу. Что мы обычно делаем в таких сценариях, мы вручную устанавливаем вкладку/окно нашего браузера в полноэкранном режиме ( F11 ), но результатом не всегда то, что мы ожидаем, потому что некоторые контент не предназначены для просмотра в полноэкранном режиме режим. Кроме того, что, если мы поможем нашим пользователям полностью использовать полномочий автоматически, снова все это приходит к лучшему пользователю.

вступление

Полноэкранный API Добавляет методы к HTML Элемент Чтобы позволить нам программно включить любой контент на странице, чтобы войти в полноэкранный режим через JavaScript. Webgl , холст и видео Элементы являются обычными целями, когда речь идет о том, чтобы идти полный экран. Онлайн-газеты и журналы – другие районы, где это может быть полезно.

Итак, давайте сначала посмотрим на это в действии, а затем пройти некоторые детали:

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

const vid = document.getElementById('shuttle');

function toggleFullScreen() {
  if (!document.fullscreenElement && vid.requestFullscreen) {
    vid.requestFullscreen();
  } else {
    if (document.exitFullscreen) {
      document.exitFullscreen(); 
    }
  }
}

document.addEventListener("keydown", function(e) {
  if (e.keyCode == 13) {
    toggleFullScreen();
  }
}, false);

Открытые свойства

На Документ объект:

💡 DocumentOrshadowroot.fullscreenElement.

Полное экранирование Свойство даст вам элемент, который отображается в полноэкранном режиме в данный момент. Это способ проверить, мы в полноэкранном режиме или нет.

💡 Документ

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

Выход полностью экрана

Вы захотите, чтобы ваши пользователи знали, что они могут нажать Esc ключ ( или F11 ) Чтобы выйти из полноэкранного режима.

Кроме того, навигация на другую страницу, изменяя вкладки или переключение на другое приложение (используя, например, Alt – Вкладка ) в то время как в полноэкранном режиме выходит также полноэкранный режим.

Как вы видели в приведенном выше примере, выходе в полноэкранный режим можно сделать с использованием document.exitfullscreen :

if (document.exitFullscreen) {
  document.exitFullscreen(); 
}

Обнаружение функций

Вы можете просто обнаружить, поддерживается ли функция или не используя либо Document.requestfullscreen или Element.requestfullscreen :

if(element.requestFullscreen) {
  element.requestFullscreen();
}

или:

if(document.requestFullscreen) {
  // enter fullscreen mode
}

Найти, стоит ли или нет в полноэкранном режиме

Как упоминалось ранее, Документ.fullscreenElement Это хороший способ проверить, находится ли браузер в полноэкранном режиме или нет. Значение этого свойства будет нулевой Если мы не в полноэкранномрезе, а текущий полноэкранный элемент в противном случае.

⚠️ Есть также логический Собственность под названием полный экран который устарел и не должен использоваться. Хотя большинство браузеров все еще поддерживают его.

Презентация

При включении полноэкранного режима программно, вы несете ответственность за то, как будут выглядеть элементы, а что появляется на экране. Очевидно, вам нужно будет изменить ширину и высоту элемента в % 100 , и к счастью, есть CSS псевдоселектор для использования:

#shuttle:fullscreen {
  width: 100%;
  height: 100%;
}

Также вы можете скрыть некоторые другие элементы на экране, чтобы уменьшить беспорядок:

:fullscreen .hide {
  display: none;
}

Поддержка браузера

Поддержка браузера действительно хороша на данный момент, почти все основные браузеры полностью поддерживают его. Только IE11 и Сафари иметь частичную поддержку. Опера Mini и Android браузер не поддерживают его в данный момент.

Надеюсь, вы узнали новую трюку, если вы не знали об этом API и счастливом полномочий (только что составил слово 😁).

Оригинал: “https://dev.to/yashints/what-you-need-to-know-about-full-screen-api-dgc”