Освоение полноэкранного режима в JavaScript: руководство по обработке «Uncaught TypeError»

Вы веб-разработчик, который столкнулся с неприятным сообщением об ошибке «Uncaught TypeError: document.getElementById(…).exitFullscreen is not a function»? Не бойся! В этой статье блога мы рассмотрим различные методы устранения этой ошибки и обработки полноэкранного режима в JavaScript. Так что хватайте редактор кода и приступайте!

Для начала давайте разберемся в самой ошибке. Сообщение «Uncaught TypeError» указывает на то, что код пытается вызвать функцию exitFullscreenдля элемента, полученного с помощью document.getElementById, но по какой-то причине функция недоступна или не распознается.. Эта ошибка часто возникает, когда рассматриваемый элемент в данный момент не находится в полноэкранном режиме или когда браузер не поддерживает функцию exitFullscreen.

Чтобы устранить эту ошибку, вы можете использовать несколько различных подходов в зависимости от вашего конкретного варианта использования. Давайте рассмотрим некоторые из этих методов:

Метод 1: проверка полноэкранного элемента

const fullscreenElement = document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
if (fullscreenElement) {
  // Exit fullscreen mode
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  }
}

Метод 2: использование свойства document.fullscreenEnabled

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

Метод 3: использование элемента document.documentElement

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

Метод 4. Обработка функций, специфичных для поставщика

const element = document.getElementById('myElement');
if (element) {
  if (element.exitFullscreen) {
    element.exitFullscreen();
  } else if (element.webkitExitFullscreen) {
    element.webkitExitFullscreen();
  } else if (element.mozCancelFullScreen) {
    element.mozCancelFullScreen();
  } else if (element.msExitFullscreen) {
    element.msExitFullscreen();
  }
}

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

В заключение, ошибка «Uncaught TypeError: document.getElementById(…).exitFullscreen is not a function» может расстраивать, но, вооружившись знаниями и методами, изложенными в этой статье, вы теперь лучше подготовлены к работе в полноэкранном режиме. режим в JavaScript. Приятного кодирования!