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

How to detect when a page exits fullscreen?

提问by corazza

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?

另外，当有人将鼠标指向页面顶部时，有没有办法阻止那个烦人的标题出现？而且，我想我可以使用preventDefault?

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”。

采纳答案by Toji

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.fullScreenElementto see if the page is fullscreen or not. If it's fullscreen the property will be non-null.

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

Check out MDNfor more details.

查看 MDN了解更多详情。

As for your other questions: No, there is no way to prevent Escfrom 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 nevergive 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。

回答by Alex W

Here's how I did it:

这是我如何做到的：

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

Supports Opera, Safari, Chrome with webkit, Firefox/Gecko with moz, IE 11 with MSFullScreenChange, and will support the actual spec with fullscreenchangeonce 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 attachEventfallbacks for older versions of IE.

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

回答by wawka

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
}

回答by ErichBSchulz

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:

我正在使用与 Toni 集成的John Dyer 代码和 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

请随意 展开

回答by Victor Dubrovsky

I slightly changed Alex W's code to make events fire on fullscreen exitsonly. 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('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
 }
}  

回答by Per Lundberg

Mozilla's MDN pagehinted me about the usage of fscreenas 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 npmpackage for use in Node.js-based build pipelines.)

不管怎样，这里的 URL 是fscreen：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 出现并在所有主要浏览器中都可用。

回答by Digggid

All browsers worked for me except for safari

除了 safari，所有浏览器都对我有用

This is what I ended up using to fix the issue.

这就是我最终用来解决问题的方法。

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

Take a look at the code pen.I have to say a huge thank to Chris Ferdinandi for his post here

看一下代码笔。我必须非常感谢 Chris Ferdinandi在这里的帖子