如何检测页面何时退出全屏？

Question

我正在使用Three.js创建一个3D多人游戏,玩家可以加入各种现有游戏.单击"播放"后,渲染器将附加到页面和全屏幕.这很好用,但问题是,当我退出全屏时,它仍然保持附加状态.我想删除它,但我不知道什么时候!

所以,基本上,我正在寻找一个事件,说"这个元素退出全屏".

这是我将渲染器附加到页面的方式:

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在3D渲染中比Chrome慢得多？我的意思是,我正在使用WebGL,这意味着正在使用GPU!

编辑:

"fullscreenchange"事件确实被触发了,但它在不同的浏览器下有不同的名称.例如,在Chrome上它被称为"webkitfullscreenchange",在Firefox上它是"mozfullscreenchange".

Answer 1

我是这样做的:

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 with webkit,Firefox/Gecko moz,IE 11 MSFullScreenChange,并且fullscreenchange一旦在所有浏览器中成功实现,将支持实际规范.显然,Fullscreen API仅在现代浏览器中受支持,因此我没有attachEvent为旧版本的IE 提供回退.

Answer 2

全屏规范指定"fullscreenchange"在页面的全屏状态发生变化时(包括进出全屏)在文档上触发(带有适当的前缀)事件.在该事件中,您可以检查document.fullScreenElement页面是否全屏.如果是全屏,则属性将为非null.

查看MDN以获取更多详细信息.

至于你的其他问题:不,没有办法阻止Esc退出全屏.这是为了确保用户始终能够控制浏览器的操作而做出的妥协.浏览器永远不会为您提供阻止用户退出全屏的方法.期.

至于Firefox在渲染方面比Chrome慢,我可以向你保证,对于大多数实际用途而言,它并非如此.如果你看到两个浏览器之间的性能差异很大,这可能意味着你的javascript代码是瓶颈,而不是GPU.

Answer 3

浏览器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 4

我正在使用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中测试过.

请随意扩展

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