Как определить, когда страница выходит из полноэкранного режима?

Я создаю многопользовательскую 3D-игру с Three.js, где игроки могут присоединяться к различным существующим играм. После нажатия "play", рендерер добавляется на страницу и на весь экран. Это прекрасно работает, но проблема в том, что, когда я выхожу из полноэкранного режима, он все еще остается добавленным. Я бы хотел удалить его, но не знаю когда!

Итак, в основном, я ищу событие, которое говорит, что "этот элемент вышел из полноэкранного режима".

Вот как я добавляю рендерер на страницу:

container = document.getElementById('container');
document.body.appendChild(container);

var renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setSize( WIDTH, HEIGHT);
container.appendChild( renderer.domElement );

Это если я полноэкранный режим:

THREEx.FullScreen.request(container); 
renderer.setSize(screen.width, screen.height);

Кроме того, есть ли способ, чтобы этот раздражающий заголовок не появлялся, когда кто-то наводит указатель мыши на верх страницы? И, я думаю, я могу просто предотвратить побег от того, что он делает (выход из полноэкранного режима) в Firefox и Chrome с preventDefault?

EDIT:

Событие "fullscreenchange" действительно запускается, но в разных браузерах оно имеет разные имена. Например, в Chrome он называется "webkitfullscreenchange", а в Firefox - "mozfullscreenchange".

Ответ 1

Спецификация Fullscreen указывает, что событие "fullscreenchange" (с соответствующим префиксом) запускается в документе в любое время, когда изменяется полноэкранное состояние страницы, включая включение и выключение полноэкранного режима. Внутри этого события вы можете проверить document.fullScreenElement, чтобы увидеть, является ли страница полноэкранным или нет. Если в полноэкранном режиме свойство будет не нулевым.

Ознакомьтесь с MDN для получения более подробной информации.

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

Что касается Firefox медленнее при рендеринге, чем Chrome, я могу заверить вас, что для большинства практических целей это не так. Если вы видите большую разницу в производительности между обоими браузерами, это, вероятно, означает, что ваш javascript-код является узким местом, а не графическим процессором.

Ответ 2

Вот как я это сделал:

if (document.addEventListener)
{
 document.addEventListener('fullscreenchange', exitHandler, false);
 document.addEventListener('mozfullscreenchange', exitHandler, false);
 document.addEventListener('MSFullscreenChange', exitHandler, false);
 document.addEventListener('webkitfullscreenchange', exitHandler, false);
}

function exitHandler()
{
 if (document.webkitIsFullScreen || document.mozFullScreen || document.msFullscreenElement !== null)
 {
  // Run code on exit
 }
}

Поддерживает Opera, Safari, Chrome с webkit, Firefox/Gecko с moz, IE 11 с MSFullScreenChange и будет поддерживать актуальную спецификацию с fullscreenchange, как только она будет успешно реализована во всех браузерах. Очевидно, что полноэкранный API поддерживается только в современных браузерах, поэтому я не предоставлял attachEvent запасные варианты для более старых версий IE.

Ответ 3

Я использую код John Dyer, интегрированный с комментариями Toni и Yannbane, чтобы создать центральный обработчик и добавить несколько слушателей, чтобы называть его

   var changeHandler = function(){                                           
      //NB the following line requrires the libary from John Dyer                         
      var fs = window.fullScreenApi.isFullScreen();
      console.log("f" + (fs ? 'yes' : 'no' ));                               
      if (fs) {                                                              
        alert("In fullscreen, I should do something here");                  
      }                                                                      
      else {                                                                 
        alert("NOT In fullscreen, I should do something here");              
      }                                                                      
   }                                                                         
   document.addEventListener("fullscreenchange", changeHandler, false);      
   document.addEventListener("webkitfullscreenchange", changeHandler, false);
   document.addEventListener("mozfullscreenchange", changeHandler, false);

Это тестируется только в Moz 12.

Пожалуйста, не стесняйтесь расширять

Ответ 4

API для браузеров изменен. Например: в Chrome отсутствует document.webkitIsFullScreen. Это то, что сработало для меня:

document.addEventListener("fullscreenchange", onFullScreenChange, false);
document.addEventListener("webkitfullscreenchange", onFullScreenChange, false);
document.addEventListener("mozfullscreenchange", onFullScreenChange, false);

onFullScreenChange() {
  var fullscreenElement = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;

  // if in fullscreen mode fullscreenElement won't be null
}

Ответ 5

Я немного изменил код Alex W, чтобы события запускались только в полноэкранном режиме и выходах. Протестировано в Firefox 53.0, Chrome 48.0 и Chromium 53.0:

if (document.addEventListener)
{
 document.addEventListener('fullscreenchange', exitHandler, false);
 document.addEventListener('mozfullscreenchange', exitHandler, false);
 document.addEventListener('MSFullscreenChange', exitHandler, false);
 document.addEventListener('webkitfullscreenchange', exitHandler, false);
}

function exitHandler()
{
 if (document.webkitIsFullScreen === false)
 {
  ///fire your event
 }
 else if (document.mozFullScreen === false)
 {
  ///fire your event
 }
 else if (document.msFullscreenElement === false)
 {
  ///fire your event
 }
}

Ответ 6

Страница MDN Mozilla подсказала мне об использовании fscreen в качестве независимого от поставщика подхода к полноэкранным API. К сожалению, даже в эту самую дату (2018-02-06) эти API не полностью стандартизированы; Firefox по умолчанию не имеет API без префикса.

В любом случае, вот URL для fscreen: https://github.com/rafrex/fscreen (он доступен в виде пакета npm для использования в сборочных конвейерах на основе Node.js.)

На данный момент это кажется мне превосходным подходом до тех пор, пока не префиксируются API без префиксов и они не будут доступны во всех основных браузерах.

Ответ 7

У меня работали все браузеры кроме сафари

Это то, что я использовал, чтобы исправить проблему.

if (navigator.userAgent.indexOf('Safari') != -1 && navigator.userAgent.indexOf('Chrome') == -1)  { 

  document.addEventListener('webkitfullscreenchange', exitHandler);

  function exitHandler() {
    if (!document.fullscreenElement && !document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
           /*CODE HERE*/      
        }
      }
    }

Посмотрите на кодовую ручку. Я должен сказать огромное спасибо Крису Фердинанди за его пост здесь