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

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);

另外，有没有办法阻止那个烦人的标题在有人将鼠标指向页面顶部时出现？而且，我想我可以通过 preventDefault 来阻止 escape 在 Firefox 和 Chrome 中做它所做的事情（退出全屏）？

编辑：

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

原文由 corazza 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

查看 MDN 了解更多详情。

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

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

原文由 Toji 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

我是这样做的：

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

Supports Opera, Safari, Chrome with webkit , Firefox/Gecko with moz , IE 11 with MSFullScreenChange , and will support the actual spec with fullscreenchange 一旦它在所有浏览器中成功实现。显然，全屏 API 仅在现代浏览器中受支持，因此我没有提供 attachEvent 旧版本 IE 的回退。

原文由 Alex W 发布，翻译遵循 CC BY-SA 4.0 许可协议