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

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

Answer 1

这是我的做法:

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

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