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

47

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

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

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

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, это означает, что используется графический процессор!

EDIT:

& Quot; fullscreenchange & quot; событие действительно запускается, но оно имеет разные имена в разных браузерах. Например, в Chrome он называется «webkitfullscreenchange», а в Firefox - «mozfullscreenchange».

Вы можете добавить слушателя для изменения размера страницы после перехода в полноэкранный режим. John Henry Briggs
возможный дубликатHow to detect if user has enabled full screen in browser Diodeus - James MacFarlane

Ваш Ответ

7   ответов
69

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.

Error: User Rate Limit ExceededifError: User Rate Limit Exceededif (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement)Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededundefinedError: User Rate Limit Exceeded!== nullError: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
2

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

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

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

10

в 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
}
Error: User Rate Limit Exceeded
40

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

Проверьте MDN Больше подробностей.

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

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

Error: User Rate Limit Exceeded corazza
Error: User Rate Limit Exceeded corazza
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceedednotError: User Rate Limit Exceeded
Error: User Rate Limit Exceededdocument.addEventListener("fullscreenchange", function(){console.log("f");}, false);Error: User Rate Limit Exceeded corazza
11

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

   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.

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

Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit ExceededalertError: User Rate Limit Exceeded
6

чтобы события происходили в полноэкранном режиме.exits только. Протестировано в 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
    }
}  
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceeded
Error: User Rate Limit Exceededdocument.fullscreenElement?
0

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

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

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

Похожие вопросы