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

I'm creating a 3D multiplayer game with Three.js, where players can join various existing games. Once "play" is clicked, the renderer is appended to the page and fullscreens. This works great, but the problem is that, when I exit the fullscreen, it still stays appended. I'd like to remove it, but I don't know when!

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

So, basically, I'm looking for an event that says "this element exited fullscreen".

所以，基本上，我正在寻找一个事件，说“这个元素退出全屏”。

This is how I append the renderer to the page:

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

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

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

This if how I fullscreen it:

如果我全屏显示它：

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

Also, is there a way to stop that annoying header from appearing whenever someone points his mouse to the top of the page? And, I guess I can just prevent escape from doing what it does (exiting fullscreen) in Firefox and Chrome with preventDefault?

此外，当有人将鼠标指向页面顶部时，是否有办法阻止令人讨厌的标题出现？而且，我想我可以阻止逃避在Firefox和Chrome中使用preventDefault做它的功能（退出全屏）？

And, also, does anyone know why is Firefox so much slower than Chrome in 3D rendering? I mean, I'm using WebGL, this means that the GPU is being used!

而且，有没有人知道为什么Firefox在3D渲染中比Chrome慢得多？我的意思是，我正在使用WebGL，这意味着正在使用GPU！

EDIT:

编辑：

The "fullscreenchange" event is indeed fired, but it has different names under different browsers. For example, on Chrome it's called "webkitfullscreenchange", and on Firefox it's "mozfullscreenchange".

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

6 个解决方案

#1

The Fullscreen spec specifies that the "fullscreenchange" (with the appropriate prefix) event is fired on the document any time the fullscreen state of the page changes, that includes going into and out of full screen. Inside that event you can check document.fullScreenElement to see if the page is fullscreen or not. If it's fullscreen the property will be non-null.

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

Check out MDN for more details.

查看MDN了解更多详情。

As for your other questions: No, there is no way to prevent Esc from exiting fullscreen. That's the compromise that was made to ensure that the user always has control over what their browser is doing. The browser will never give you a way to prevent users from exiting fullscreen. Period.

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

As for Firefox being slower at rendering than Chrome, I can assure you that for most practical purposes it's not. If you're seeing a large difference in performance between the two browsers that probably means your javascript code is the bottleneck, not the GPU.

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

#2

Here's how I did it:

我是这样做的：

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

Supports Opera, Safari, Chrome with webkit, Firefox/Gecko with moz, IE 11 with MSFullScreenChange, and will support the actual spec with fullscreenchange once it's been successfully implemented in all of the browsers. Obviously, Fullscreen API is only supported in the modern browsers, so I did not provide attachEvent fallbacks for older versions of IE.

支持Opera，Safari，Chrome with webkit，Firefox / Gecko with moz，IE 11 with MSFullScreenChange，并且一旦在所有浏览器中成功实现，将支持fullscreenchange的实际规范。显然，Fullscreen API仅在现代浏览器中受支持，因此我没有为旧版本的IE提供attachEvent回退。

#3

i'm using John Dyer's code, integrated with Toni, and Yannbane's comments to create a central handler, and adding multiple listeners to call it:

我正在使用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);

This is only tested in Moz 12.

这只在Moz 12中测试过。

Please feel free to expand

请随意扩大

#4

API for browsers changed. For example: there is no document.webkitIsFullScreen in Chrome. This is what worked for me:

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

I slightly changed Alex W's code to make events fire on fullscreen exits only. Tested in Firefox 53.0, Chrome 48.0, and Chromium 53.0:

我略微更改了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
    }
}  

#6

Mozilla's MDN page hinted me about the usage of fscreen as a vendor-agnostic approach to the fullscreen APIs. Sadly, even at this very date (2018-02-06), these APIs are not fully standardized; Firefox does not have the unprefixed APIs enabled by default.

Mozilla的MDN页面暗示我使用fscreen作为全屏API的供应商不可知方法。可悲的是，即使在这个日期（2018-02-06），这些API还没有完全标准化; Firefox默认情况下没有启用未加前缀的API。

Anyway, here is the URL to fscreen: https://github.com/rafrex/fscreen (it's available as an npm package for use in Node.js-based build pipelines.)

无论如何，这里是fscreen的URL：https：//github.com/rafrex/fscreen（它可以作为npm包在基于Node.js的构建管道中使用。）

For the moment, this seems like the superior approach to me until the unprefixed APIs have landed and are readily available in all major browsers.

目前，这似乎是我的优秀方法，直到没有前缀的API登陆并且在所有主流浏览器中都可以使用。