Элемент: событие fullscreenchange

Ограниченная доступность

Эта функция не относится к Baseline, так как она не работает во всех широко используемых браузерах.

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

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

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

Это событие нельзя отменить.

Синтаксис

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

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

onfullscreenchange = (event) => {};

Тип события

Общее Event.

Примеры

В этом примере обработчик для события fullscreenchange добавляется к элементу с идентификатором fullscreen-div.

Если пользователь нажимает на кнопку «Переключить полноэкранный режим», обработчик 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>
</div>

JavaScript

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

const el = document.getElementById("fullscreen-div");

el.addEventListener("fullscreenchange", fullscreenchangeHandler);
// or
el.onfullscreenchange = fullscreenchangeHandler;

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

Спецификации

Спецификация
Fullscreen API # handler-document-onfullscreenchange

Совместимость с браузерами

	Рабочий стол					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`fullscreenchange_event`	7115	791212–14	6410	581512.1–15	16.45.1	7118	6410	501412.1–14	16.4 ["Только доступно на iPad, а не на iPhone.", "Показывается кнопка перекрытия, которую нельзя отключить. Проведение пальцем вниз выходит из полноэкранного режима, что делает его непригодным для некоторых случаев использования, таких как игры."] 12 Только доступно на iPad, а не на iPhone.	10.01.0	71≤37

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Element/fullscreenchange_event