Полноэкранный веб-режим прост в освоении [полноэкранное отображение локальных элементов]

внешний интерфейс Element браузер CSS
Полноэкранный веб-режим прост в освоении [полноэкранное отображение локальных элементов]

Впервые у меня появилась концепция полноэкранного режима на веб-страницах, это было своего рода полноэкранное воспроизведение видео на веб-страницах. Это чувствуется очень сильно. Несколько недель назад был спрос на полноэкранный режим. Связавшись с ним, я понял, что полноэкранный режим не является таинственным. Это простой навык для освоения...

блог,Документы внешнего накопления,публика,GitHub

CodePen Demo

адрес:демо,code

Заходите и смотрите, играйте, эта статья объяснит вместе с этой демонстрацией.

Полноэкранный функционал инкапсулирован в классе:

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

код находится вcodepenв демо.

Что такое полный экран?

Введение в MDN:

Используя предоставленный API, элемент и его дочерние элементы могут занимать весь экран и в то же время скрывать весь пользовательский интерфейс браузера и другие приложения с экрана.

Полноэкранная производительность в хроме:

  1. Полноэкранный режим скроет панель вкладок и панель закладок

  2. Если веб-страница не была полностью открыта в начале, она также будет в полноэкранном режиме.Заполните весь экран элементом, который будет полноэкранным

  3. Многослойный полноэкранный режим, как и в каштанах, можно сначала на весь экран слева, а потом на весь экран красным.

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

  4. При входе в полноэкранный режим появляетсяприглашение по умолчанию: «Нажмите esc, чтобы выйти из полноэкранного режима», как показано ниже:

  5. при нажатииEscИли вызовите метод выхода из полноэкранного режима, чтобы выйти из полноэкранного режима.Панель вкладок и панель закладок по-прежнему скрыты, а элементы на веб-странице восстанавливаются до исходного размера..

    Чтобы отобразить панель закладок и панель вкладок, необходимо обновить страницу.

Полноэкранный API:

Всего используется 6 API.:

  1. Поддерживает ли браузер полноэкранный режим:document.fullscreenEnabled
  2. Чтобы перевести элемент в полноэкранный режим:Element.requestFullscreen()
  3. Выйти из полноэкранного режима:document.exitFullscreen()
  4. Проверьте, находится ли какой-либо узел в настоящее время в полноэкранном режиме:document.fullscreenElement
  5. Войти в полноэкранный режим/выйти из полноэкранного режима, запускать события:document.fullscreenchange
  6. Срабатывает, когда невозможно войти в полноэкранный режим:document.fullscreenerror

Префикс браузера:

Не все браузеры в настоящее время реализуют версию API без префикса, поэтому нам нужно сделать API-совместимым для разных браузеров:

это яdemoСовместимость с браузерами, сделанными в:

/**
 * @description: 是否支持全屏+判断浏览器前缀
 * @param {Function} fn 不支持全屏的回调函数 这里设了一个默认值
 */
isFullscreen(fn) {
  let fullscreenEnabled;
  // 判断浏览器前缀
  if (document.fullscreenEnabled) {
    fullscreenEnabled = document.fullscreenEnabled;
  } else if (document.webkitFullscreenEnabled) {
    fullscreenEnabled = document.webkitFullscreenEnabled;
    this.prefixName = 'webkit';
  } else if (document.mozFullScreenEnabled) {
    fullscreenEnabled = document.mozFullScreenEnabled;
    this.prefixName = 'moz';
  } else if (document.msFullscreenEnabled) {
    fullscreenEnabled = document.msFullscreenEnabled;
    this.prefixName = 'ms';
  }
  if (!fullscreenEnabled) {
    if (fn !== undefined) fn(); // 执行不支持全屏的回调
    this.isFullscreenData = false;
  }
}

Когда я его создаю, я оцениваю, поддерживает ли браузер полноэкранный режим, а затемсохранить префикс браузера.

Это рекомендуется, потому что было бы отвратительно, если бы каждый API должен был многократно определять префикс браузера вот так!

1. Поддерживает ли браузер полноэкранный режим: document.fullscreenEnabled

document.fullscreenEnabledСвойство возвращает логическое значение, указывающее, можно ли переключить текущий документ в полноэкранный режим.

Код указан в коде префикса браузера выше.

Если префикс браузера не сохраняется, обратите внимание на совместимость разных префиксов браузера! Следующее не будет подчеркиваться.

2. Переведите элемент в полноэкранный режим: Element.requestFullscreen()

/**
 * @description: 将传进来的元素全屏
 * @param {String} domName 要全屏的dom名称
 */
Fullscreen(domName) {
  const element = document.querySelector(domName); // 获取dom
  const methodName =
    this.prefixName === ''
      ? 'requestFullscreen'
      : `${this.prefixName}RequestFullScreen`; // API前缀
  element[methodName](); // 调用全屏
}

это мыРеализовать полноэкранный API, это супер просто?

Стоит отметить, что:Вызов этого API не гарантирует, что элемент сможет перейти в полноэкранный режим.

  1. MDN: например<iframe>Элементы имеют атрибут allowfullscreen для дополнительного отображения своего содержимого в полноэкранном режиме.

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

  2. Полноэкранные запросы должны выполняться в обработчике событий (点击事件等), иначе он будет отклонен.

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

3. Выйти из полноэкранного режима: document.exitFullscreen()

вводить:

exitFullscreen() {
  const methodName =
    this.prefixName === ''
      ? 'exitFullscreen'
      : `${this.prefixName}ExitFullscreen`; // API 前缀
  document[methodName](); // 调用
}

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

Многослойный полноэкранный режим

рисунокdemo, сначала войти в левый полный экран, а потом войти в красный полный экран, то есть: случай многослойного полного экрана (хотя таких случаев не много).

При многослойной полноэкранной ситуации необходимо послойно выходить в исходную ситуацию страницы, вместо того, чтобы звонить один разdocument.exitFullscreen()Он возвращает первоначальный вид страницы.

4. Проверьте, находится ли какой-либо узел в настоящее время в полноэкранном режиме: document.fullscreenElement

Свойство fullscreenElement возвращает узел Element, находящийся в полноэкранном режиме, или значение null, если ни один узел в данный момент не находится в полноэкранном режиме.

/**
 * @description: 检测有没有元素处于全屏状态
 * @return 布尔值
 */
isElementFullScreen() {
  const fullscreenElement =
    document.fullscreenElement ||
    document.msFullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement; // 有前缀的f是大写，没前缀是小写
  if (fullscreenElement === null) {
    return false; // 当前没有元素在全屏状态
  } else {
    return true; // 有元素在全屏状态
  }
}

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

Эффект от двух методов одинаков, но поскольку IE не поддерживает это свойство, вотdocument.fullscreenElement

5. Войти в полноэкранный режим/выйти из полноэкранного режима, запустить событие: document.fullscreenchange

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

Примечание MDN: это событие не предоставляет никакой информации о входе или выходе из полноэкранного режима..

После долгого чтения информации, возвращаемой событием, я не могу найти значение, указывающее, что это вход в полноэкранный режим или выход из полноэкранного режима!

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

/**
 * @description: 监听进入/离开全屏
 * @param {Function} enter 进入全屏的回调
 *  @param {Function} quit 离开全屏的回调
 */
screenChange(enter,quit) {
  if (!this.isFullscreenData) return;
  const methodName = `on${this.prefixName}fullscreenchange`;
  document[methodName] = e => {
    if (this.isElementFullScreen()) {
      enter && enter(e); // 进入全屏回调
    } else {
      quit && quit(e); // 离开全屏的回调
    }
  };
}

Примечание: случай многослойного полноэкранного режима

  1. Сначала войдите в левый полноэкранный режим (введите обратный вызов в полноэкранном режиме), затем войдите в красный полноэкранный режим (введите обратный вызов в полноэкранном режиме)
  2. Выход из полноэкранного режима, выход из красного полноэкранного режима в это время, левая сторона по-прежнему полноэкранная (триггер для входа в полноэкранный обратный вызов)
  3. В этом случае вы можете сделать некоторые ограничения состояния при нажатии кнопки. Или судить по информации о доме, возвращаемой полноэкранным событием.

6. Запускается при невозможности войти в полноэкранный режим: document.fullscreenerror

Выход на полный экран не всегда удачен, это могут быть технические причины, а может быть отклонен пользователем, вводим API полного текста вышеElement.requestFullscreen()Отчасти сказал.

Например, полноэкранный запрос не вызывается в обработчике события, и здесь будет перехвачена ошибка

/**
 * @description: 浏览器无法进入全屏时触发
 * @param {Function} enterErrorFn 回调
 */
screenError(enterErrorFn) {
  const methodName = `on${this.prefixName}fullscreenerror`;
  document[methodName] = e => {
    enterErrorFn && enterErrorFn(e)
  };
}

Css: стиль в полноэкранном режиме

По умолчанию в chrome 70 добавит два класса в полноэкранный дом: взгляните

  1. Черный фон по умолчанию
:not(:root):-webkit-full-screen::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: black; // 会将背景设为黑色的 如果你没为你的dom设置背景的话，全屏下会为黑色
}
  1. Стиль по умолчанию:
:not(:root):-webkit-full-screen {
  object-fit: contain;
  position: fixed !important;
  top: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
  box-sizing: border-box !important;
  min-width: 0px !important;
  max-width: none !important;
  min-height: 0px !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  margin: 0px !important;
}

CSS для полноэкранного режима:

В полноэкранном режиме CSS большинства браузеров поддерживает псевдокласс :full-screen, и только IE11 поддерживает псевдокласс :fullscreen. С помощью этого псевдокласса можно установить отдельные свойства CSS для полноэкранного режима.

Следующий css взят у учителя Ruan Yifeng.Полноэкранный API: работа в полноэкранном режиме

/* 针对dom的全屏设置 */
.div:-webkit-full-screen {
  background: #fff;
}
/* 全屏属性 */
:-webkit-full-screen {}
:-moz-full-screen {}
:-ms-fullscreen {}
/* 全屏伪类 当前chrome:70 不支持 */
:full-screen {
}
:fullscreen {
  /* IE11支持 */
}

Эпилог

Мы можем применить полноэкранную технологию к играм H5, веб-сайтам с информационными потоками, видео и т. д. В следующий раз, когда возникнет потребность в полноэкранном режиме, не паникуйте и вернитесь к статьям в этой статье.каштан, просто возьмите класс, который я инкапсулировал, и используйте его напрямую!

Я надеюсь, что друзья, которые прочитали это, могут нажать «Нравится» / «Подписаться», ваша поддержка — самая большая поддержка для меня.

блог,Документы внешнего накопления,публика,GitHub

Выше 2018.12.1

Использованная литература:

Полноэкранный API: работа в полноэкранном режиме

MDN

Категории