Полноэкранный API в JavaScript предоставляет разработчикам возможность переключать полноэкранный режим в веб-приложениях, обеспечивая захватывающий и увлекательный пользовательский опыт. Однако при работе с полноэкранным API вы можете столкнуться с сообщением об ошибке типа «Свойство «mozRequestFullScreen» не существует для типа «HTMLElement». Вы имели в виду «requestFullscreen»?» Эта ошибка обычно возникает при использовании устаревших префиксов, специфичных для браузера. В этой статье мы рассмотрим различные методы использования полноэкранного API в JavaScript, приведем примеры кода и объясним, как избежать таких ошибок.

Метод 1: requestFullscreen()
Метод requestFullscreen()— это стандартный способ запроса полноэкранного режима для элемента. Он работает в большинстве современных браузеров и не требует каких-либо префиксов, специфичных для браузера.

const element = document.getElementById("myElement");
if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
} else if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
}

Метод 2: msRequestFullscreen()
Для Internet Explorer и Microsoft Edge можно использовать метод msRequestFullscreen().

const element = document.getElementById("myElement");
if (element.msRequestFullscreen) {
  element.msRequestFullscreen();
}

Метод 3: webkitRequestFullscreen()
Для более старых версий Safari и других браузеров на базе WebKit можно использовать метод webkitRequestFullscreen().

const element = document.getElementById("myElement");
if (element.webkitRequestFullscreen) {
  element.webkitRequestFullscreen();
}

Метод 4: mozRequestFullScreen()
Для более старых версий Firefox вы можете использовать метод mozRequestFullScreen().

const element = document.getElementById("myElement");
if (element.mozRequestFullScreen) {
  element.mozRequestFullScreen();
}

Метод 5: проверка состояния полноэкранного режима
Чтобы проверить, находится ли элемент в полноэкранном режиме, вы можете использовать свойство document.fullscreenElement.

if (document.fullscreenElement) {
  console.log("Element is in fullscreen mode");
} else {
  console.log("Element is not in fullscreen mode");
}

Метод 6. Выход из полноэкранного режима
Чтобы программно выйти из полноэкранного режима, вы можете использовать метод exitFullscreen().

if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
  document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) {
  document.msExitFullscreen();
}

В этой статье мы рассмотрели различные методы использования полноэкранного API в JavaScript. Мы узнали о методе requestFullscreen()как о стандартном способе запроса полноэкранного режима и обнаружили методы, специфичные для браузера, такие как msRequestFullscreen(), webkitRequestFullscreen()и mozRequestFullScreen()для удовлетворения требований различных браузеров. Кроме того, мы обсудили, как проверить полноэкранное состояние с помощью document.fullscreenElementи как программно выйти из полноэкранного режима. Понимая эти методы, разработчики могут создавать захватывающие и интерактивные веб-приложения, использующие полноэкранный API.