如何检测页面何时退出全屏？
我正在用Three.js创build一个3D多人游戏，玩家可以join各种现有的游戏。 一旦“播放”被点击，渲染器被追加到页面和全屏。 这很好，但问题是，当我退出全屏，它仍然保持附加。 我想删除它，但我不知道什么时候！
所以，基本上，我正在寻找一个事件，说“这个元素退出全屏”。
这是我如何将渲染器追加到页面：
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”。
Fullscreen规范指定每当页面的全屏状态发生变化（包括进入和退出全屏幕）时，文档上都会触发"fullscreenchange" （具有适当的前缀）事件。 在这个事件里面，你可以检查document.fullScreenElement来查看页面是否全屏。 如果它是全屏，则该属性将是非空的。
查看MDN了解更多详情。
至于你的其他问题：不，没有办法阻止Esc退出全屏。 这是为了确保用户始终能够控制浏览器的function而作出的妥协。 浏览器永远不会让你阻止用户退出全屏。 期。
至于Firefox在渲染上比Chrome慢，我可以向你保证，对于大多数实际目的来说，事实并非如此。 如果你看到两个浏览器之间的性能差异很大，这可能意味着你的JavaScript代码是瓶颈，而不是GPU。
以下是我如何做到的：
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 */ } }
支持Opera，Safari，带有webkit Chrome，带MSFullScreenChange Firefox / Gecko，带有MSFullScreenChange IE 11，一旦在所有浏览器中成功实现，将支持fullscreenchange的实际规范。 很明显，全屏API只在现代浏览器中被支持，所以我没有为老版本的IE提供attachEvent回退。
我使用John Dyer的代码 ，与Toni集成，Yannbane的注释创build一个中央处理程序，并添加多个侦听器来调用它：
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中进行testing。
请随意扩大
浏览器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的代码，使事件只在全屏退出时触发。 testingFirefox 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 } }
