Документ: событие fullscreenchange

Событие fullscreenchange срабатывает сразу после того, как браузер переключается в полноэкранный режим или выходит из него.

Событие отправляется в Element, который переходит в полноэкранный режим или выходит из него, а затем это событие поднимается до Document.

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

Это событие не может быть отменено.

Используйте имя события в методах, таких как addEventListener(), или задайте свойство обработчика события.

addEventListener("fullscreenchange", (event) => {});

onfullscreenchange = (event) => {};

Общее Event.

В этом примере обработчик события fullscreenchange добавляется к Document.

Если пользователь нажмёт на кнопку «Переключить полноэкранный режим», обработчик click переключит полноэкранный режим для div. Если у document.fullscreenElement есть значение, он выйдет из полноэкранного режима. В противном случае div будет переведен в полноэкранный режим.

Помните, что к моменту обработки события fullscreenchange, состояние элемента уже изменилось. Поэтому, если изменение происходит в полноэкранный режим, document.fullscreenElement будет указывать на элемент, который сейчас находится в полноэкранном режиме. С другой стороны, если document.fullscreenElement равно null, полноэкранный режим был отменён.

Это означает, что в примере кода, если элемент сейчас находится в полноэкранном режиме, обработчик fullscreenchange записывает id полноэкранного элемента в консоль. Если document.fullscreenElement равно null, код записывает сообщение, что изменение направлено на выход из полноэкранного режима.

HTML

<h1>fullscreenchange event example</h1>
<div id="fullscreen-div">
  <button id="toggle-fullscreen">Toggle Fullscreen Mode</button>
  <pre id="logger"></pre>
</div>

CSS

* {
  box-sizing: border-box;
}

#fullscreen-div {
  height: 150px;
  padding: 1rem;
  background-color: pink;
}

#logger {
  height: 80px;
  padding: 0 0.5rem;
  background-color: white;
  overflow: scroll;
}

JavaScript

const logger = document.querySelector("#logger");
const fullScreenElement = document.querySelector("#fullscreen-div");

function log(message) {
  logger.textContent = `${logger.textContent}\n${message}`;
}

function fullscreenchangeHandler(event) {
  // document.fullscreenElement will point to the element that
  // is in fullscreen mode if there is one. If there isn't one,
  // the value of the property is null.
  if (document.fullscreenElement) {
    log(`Element: ${document.fullscreenElement.id} entered fullscreen mode.`);
  } else {
    log("Leaving fullscreen mode.");
  }
}

document.addEventListener("fullscreenchange", fullscreenchangeHandler);

// When the toggle button is clicked, enter/exit fullscreen
document.getElementById("toggle-fullscreen").addEventListener("click", () => {
  if (document.fullscreenElement) {
    // exitFullscreen is only available on the Document object.
    document.exitFullscreen();
  } else {
    fullScreenElement.requestFullscreen();
  }
});

• fullscreenerror
• Element: fullscreenchange событие
• API полноэкранного режима
• Руководство по API полноэкранного режима