66

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

编辑：

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

4

7 回答 7

94

我是这样做的：

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)
 {
  // Run code on exit
 }
}

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

于 2014-09-16T19:03:12.240 回答
48

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

查看 MDN了解更多详情。

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

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

于 2012-05-22T17:34:24.247 回答
12

浏览器的 API 已更改。

例如：document.webkitIsFullScreenChrome 中没有。这对我有用：

document.addEventListener('fullscreenchange', onFullScreenChange, false);
document.addEventListener('webkitfullscreenchange', onFullScreenChange, false);
document.addEventListener('mozfullscreenchange', onFullScreenChange, false);

function onFullScreenChange() {
  var fullscreenElement =
    document.fullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement;

  // if in fullscreen mode fullscreenElement won't be null
}
于 2016-04-22T13:54:30.637 回答
10

我正在使用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 中进行了测试。

请放心 展开

于 2013-04-27T23:08:26.277 回答
8

我稍微更改了 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
 }
}
于 2017-05-01T09:45:28.547 回答
3

Mozilla 的MDN 页面提示我使用与fscreen供应商无关的方法来处理全屏 API。遗憾的是，即使在这个日期（2018-02-06），这些 API 也没有完全标准化；默认情况下，Firefox 没有启用无前缀 API。

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

目前，这对我来说似乎是一种优越的方法，直到无前缀的 API 登陆并在所有主要浏览器中都可用。

于 2018-02-06T20:41:33.040 回答
0

除 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 在这里的帖子

于 2019-01-12T02:54:23.293 回答