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

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

Answer 2

全屏规范指定只要页面的全屏状态发生变化，就会在文档上触发"fullscreenchange"（带有相应的前缀）事件，包括进出全屏。在该活动中，您可以查看document.fullScreenElement以查看该网页是否为全屏。如果是全屏，则该属性将为非null。

Check out MDN了解详情。

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

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

Answer 3

我正在使用John Dyer's code，与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 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和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
    }
}

Answer 6

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

无论如何，这是fscreen的网址：https://github.com/rafrex/fscreen（它可用作基于Node.js的构建管道的npm包。）

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

Answer 7

除野生动物园外，所有浏览器都为我工作

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

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

看看code pen. 我要非常感谢克里斯·费迪南迪（Chris Ferdinandi）的post here

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

7 个答案: