如何检测页面何时退出全屏? [英] How to detect when a page exits fullscreen?

问题描述

我正在使用 Three.js 创建一个 3D 多人游戏，玩家可以在其中加入各种现有游戏.单击播放"后，渲染器将附加到页面和全屏.这很好用，但问题是，当我退出全屏时，它仍然保持附加状态.我想删除它，但我不知道什么时候！

I'm creating a 3D multiplayer game with Three.js, where players can join various existing games. Once "play" is clicked, the renderer is appended to the page and fullscreens. This works great, but the problem is that, when I exit the fullscreen, it still stays appended. I'd like to remove it, but I don't know when!

所以，基本上，我正在寻找一个显示此元素退出全屏"的事件.

So, basically, I'm looking for an event that says "this element exited fullscreen".

这是我将渲染器附加到页面的方式:

This is how I append the renderer to the page:

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 来防止在 Firefox 和 Chrome 中执行它所做的事情(退出全屏)?

Also, is there a way to stop that annoying header from appearing whenever someone points his mouse to the top of the page? And, I guess I can just prevent escape from doing what it does (exiting fullscreen) in Firefox and Chrome with preventDefault?

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

The "fullscreenchange" event is indeed fired, but it has different names under different browsers. For example, on Chrome it's called "webkitfullscreenchange", and on Firefox it's "mozfullscreenchange".

推荐答案

Fullscreen 规范指定在文档处于全屏状态时会触发 "fullscreenchange"(带有适当的前缀)事件页面更改，包括进入和退出全屏.在该事件中，您可以检查 document.fullScreenElement 以查看页面是否全屏.如果是全屏，则该属性将为非空.

The Fullscreen spec specifies that the "fullscreenchange" (with the appropriate prefix) event is fired on the document any time the fullscreen state of the page changes, that includes going into and out of full screen. Inside that event you can check document.fullScreenElement to see if the page is fullscreen or not. If it's fullscreen the property will be non-null.

查看 MDN 了解更多详情.

至于您的其他问题:不，没有办法阻止 Esc 退出全屏.这是为了确保用户始终可以控制其浏览器正在执行的操作而做出的妥协.浏览器不会永远给你一种方法来阻止用户退出全屏.期间.

As for your other questions: No, there is no way to prevent Esc from exiting fullscreen. That's the compromise that was made to ensure that the user always has control over what their browser is doing. The browser will never give you a way to prevent users from exiting fullscreen. Period.

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

As for Firefox being slower at rendering than Chrome, I can assure you that for most practical purposes it's not. If you're seeing a large difference in performance between the two browsers that probably means your javascript code is the bottleneck, not the GPU.

这篇关于如何检测页面何时退出全屏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！