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

Question

Я создаю 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, это означает, что GPU используется!

EDIT:

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

Answer 1

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

Check out MDN для получения более подробной информации.

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

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

Answer 2

я использую John Dyer's code, интегрированный с Тони, и комментарии 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); 

Это проверяется только в 12 млн унций.

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

Answer 3

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

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 с webkit, Firefox/Gecko с moz, IE 11 с MSFullScreenChange, и будет поддерживать фактическая спецификация с fullscreenchange, как только она была успешно реализована во всех браузерах. Очевидно, что Fullscreen API поддерживается только в современных браузерах, поэтому я не предоставлял резервные копии attachEvent для более старых версий IE.

Answer 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 
} 

Answer 5

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

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

Answer 6

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

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

На данный момент, это кажется вышестоящей подход ко мне до API unspfixed API приземлился и легко доступен во всех основных браузерах.