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

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

还有，有没有一种方法可以阻止每当有人将鼠标指向页面顶部时出现令人讨厌的标题？而且，我想我可以用

preventDefault

阻止escape在Firefox和Chrome中做它所做的事情（退出全屏）

编辑：

---

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

全屏规范规定，在页面的全屏状态发生变化（包括进入和退出全屏）时，文档上会触发

“fullscreenchange”

（带有适当的前缀）事件。在该事件中，您可以检查

document.fullScreenElement

，查看页面是否全屏。如果是全屏显示，则属性将为非空

更多细节

至于你的其他问题：不，没有办法阻止

Esc

退出全屏。这是为了确保用户始终能够控制其浏览器的操作而做出的妥协。浏览器永远不会为您提供阻止用户全屏退出的方法。句号

至于Firefox的渲染速度比Chrome慢，我可以向您保证，在大多数实际应用中，Firefox并不是这样。如果您发现两种浏览器的性能有很大差异，这可能意味着javascript代码是瓶颈，而不是GPU。

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

请随意展开

以下是我是如何做到的：

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、带有

webkit

的Chrome、带有

moz

的Firefox/Gecko、带有

MSFullScreenChange

的IE 11，一旦在所有浏览器中成功实现，将支持带有

fullscreenchange

的实际规范。显然，全屏API仅在现代浏览器中受支持，因此我没有为IE的旧版本提供

attachEvent

回退。

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
}

---

我稍微修改了Alex W的代码，使事件仅在全屏退出时触发。在Firefox 53.0、Chrome 48.0和Chrome 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
 }
}  

Mozilla向我暗示说，

fscreen

是一种与供应商无关的全屏API方法。遗憾的是，即使在这个日期（2018-02-06），这些API也没有完全标准化；默认情况下，Firefox没有启用不固定的API

无论如何，这里是

fscreen

的URL:（它作为

npm

包提供，用于基于Node.js的构建管道。）

---

目前，这似乎是我的最佳选择，直到未经修改的API登陆并在所有主流浏览器中都可以使用。

除了safari之外，所有浏览器都适合我

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

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

看一看

---

我要对Chris Ferdinandi说一声巨大的感谢，感谢他的

你可以在全屏后添加一个页面调整的侦听器。可能是重复的感谢！虽然，我怀疑它与我的代码有任何关系，但它非常简单……嘿@Toji，我刚刚尝试过：

document.addEventListener（“fullscreenchange”，function（）{console.log（“f”）；}，false），但它似乎不起作用！是的，对不起。在这一点上，我应该说得更清楚些。这就是为什么我说“有适当的前缀”。各位，请停止投票懒惰的答案。“其他人说了一些有效的话。”这不是一个有效的答案。@vsync-只需用您自己的代码替换
alert
语句，这对我不起作用。在ubuntu上的firefox上测试过。我也没有。Chrome 58，Win10。如果我全屏显示，它将触发，但如果我关闭或退出全屏显示，它将触发Firefox具有非全屏文档的结果。全屏元素为
未定义
，导致
！==null
始终为真。我将
if
语句更改为
if（！document.webkitIsFullScreen&&！document.mozFullScreen&&！document.msfullscreen元素）
以检测从全屏退出感谢@AhmadBehzadi，我编辑这个答案是为了使用你的方法，这种方法效果更好。是否应该对
文档进行测试。fullscreenElement
？这是这个问题的准确答案。“检测全屏退出”