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

我正在用 Three. js 创建一个3 d 多人游戏，玩家可以在其中加入各种现有的游戏。一旦点击“播放”，渲染器就会附加到页面和全屏。这很好用，但问题是，当我退出全屏时，它仍然保持附加状态。我想把它取出来，但不知道什么时候！

所以，基本上，我在寻找一个事件，说: “这个元素退出全屏幕”。

下面是我如何向页面追加渲染器:

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

还有，当有人把鼠标指向页面顶部时，是否有办法阻止那个烦人的标题出现？而且，我想我可以阻止 escape 做它在 Firefox 和 Chrome 中用 preventDefault做的事情(退出全屏) ？

编辑:

“ fullscreen change”事件确实被触发，但是它在不同的浏览器下有不同的名称。例如，在 Chrome 上它被称为“ webkitfullscreen change”，在 Firefox 上它被称为“ mozfullscreen change”。

76691 次浏览
小开
最佳答案

Fullscreen 规范指定，只要页面的全屏状态发生变化(包括进入和退出全屏) ，就会在文档上触发 "fullscreenchange"(带有适当的前缀)事件。在这个事件中，你可以检查 document.fullScreenElement看看页面是否是全屏的。如果它是全屏的，那么属性将是非空的。

查看 MDN 了解更多细节。

至于你的其他问题: 不，没有办法阻止 Esc退出全屏。这是为了确保用户总是能够控制他们的浏览器在做什么而做出的妥协。浏览器将 永远不会提供一种防止用户退出全屏的方法。就这样。

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

小开

我使用 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测试过。

请随意发展

小开

我是这么做的:

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，使用 webkit的 Chrome，使用 moz的 Firefox/Gecko，使用 MSFullScreenChange的 IE 11，一旦 fullscreenchange在所有浏览器中成功实现，它将支持实际规范。显然，全屏 API 只在现代浏览器中受支持，所以我没有为旧版本的 IE 提供 attachEvent备份。

小开

浏览器的 API 发生了变化。

例如: Chrome 中没有 document.webkitIsFullScreen，这对我来说很有用:

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

我稍微改变了亚历克斯 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
}
}
小开

Mozilla 的 MDN 页面向我暗示了使用 fscreen作为全屏 API 的一种与供应商无关的方法。遗憾的是，即使在这个特定的日期(2018-02-06) ，这些 API 还没有完全标准化; Firefox 默认没有启用无前缀的 API。

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

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

小开

除了狩猎之外，所有的浏览器都对我有用

这就是我最后用来解决问题的东西。

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

看看 < a href = “ https://codepen.io/Digggid/pen/MZzoYy”rel = “ nofollow noReferrer”> 代码钢笔。 我不得不说一个巨大的感谢克里斯费迪南迪为他的 贴在这里


提交答案