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

Я создаю многопользовательскую 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?

И, кроме того, кто-нибудь знает, почему Firefox намного медленнее, чем Chrome в 3D-рендеринге? Я имею в виду, я использую WebGL, это означает, что используется графический процессор!

РЕДАКТИРОВАТЬ:

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

Источник

6 ответов

Решение

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

Проверьте MDN для более подробной информации.

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

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

Источник

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

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

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

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

Источник

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
}
Источник

Я использую код Джона Дайера, интегрированный с Тони, и комментарии Яннбейна, чтобы создать центральный обработчик, и добавляю несколько слушателей для его вызова:

   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.

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

Источник

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

if (document.addEventListener)
{
    document.addEventListener('webkitfullscreenchange', exitHandler, false);
    document.addEventListener('mozfullscreenchange', exitHandler, false);
    document.addEventListener('fullscreenchange', exitHandler, false);
    document.addEventListener('MSFullscreenChange', 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
    }
}
Источник

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

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

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

Источник

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

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

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*/      
        }
      }
    }

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

Источник
Другие вопросы по тегам