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

IT技术 javascript html browser fullscreen
2021-01-27 02:03:22

我正在使用 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?

编辑：

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

6个回答

这是我如何做到的：

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 !== null)
 {
  // Run code on exit
 }
}

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

如果我全屏它会触发但如果我关闭或退出全屏它应该触发
2021-03-15 02:03:22
Firefox 的结果是非全屏 document.fullscreenElement as undefined，导致!== null始终为 true。
2021-03-16 02:03:22
谢谢@AhmadBehzadi，我编辑了这个答案以使用你的方法效果更好。
2021-03-23 02:03:22
我将if语句更改为此if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement)以检测退出全屏
2021-04-02 02:03:22

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

查看 MDN了解更多详情。

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

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

嘿@Toji，我刚刚试过这个：document.addEventListener("fullscreenchange", function(){console.log("f");}, false);，但它似乎不起作用！
2021-03-16 02:03:22
谢谢！虽然，我怀疑它与我的代码有什么关系，但它非常简单......
2021-03-21 02:03:22
是的，对不起。在这一点上我应该更清楚。这就是为什么我说“带有适当的前缀”。
2021-03-28 02:03:22
人们，请停止投票懒惰的答案。“别人说的有道理。” 是不是一个有效的答案。
2021-04-07 02:03:22

浏览器的 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
}

我正在使用与 Toni 集成的John Dyer 代码和 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 中进行了测试。

请随意 展开

这对我不起作用。在 ubuntu 上的 firefox 中测试。
2021-03-27 02:03:22
对我来说也不是。铬 58，Win10。
2021-03-31 02:03:22
@vsync - 只需alert用您自己的代码替换语句
2021-04-07 02:03:22

我稍微更改了 Alex 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
 }
}
这是这个问题的准确答案。“检测全屏退出”
2021-03-14 02:03:22
不应该有测试document.fullscreenElement吗？
2021-03-20 02:03:22
其它你可能感兴趣的问题
上一篇为什么 NaN === NaN 是假的？ 下一篇React.js 中的 OnClick 事件绑定