如何当一个页面退出全屏检测？如何当一个页面退出全屏检测？(How to detect when a

我创建一个3D多人游戏three.js所，在这里玩家可以加入现有的各种游戏。一旦“打”被点击，渲染器被添加到页面，全屏播放。这个伟大的工程，但问题是，当我退出全屏，它仍然停留追加。我想删除它，但我不知道什么时候！

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

这是我的渲染器添加到页面：

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远远低于Chrome浏览器的3D渲染？我的意思是，我使用的WebGL，这意味着正在使用的GPU！

编辑：

该“fullscreenchange”事件确实解雇，但它在不同的浏览器不同的名字。例如，在Chrome这就是所谓的“webkitfullscreenchange”，并在Firefox浏览器的“mozfullscreenchange”。

Answer 1:

全屏规范规定了"fullscreenchange" （用适当的前缀）事件对文档的任何时间的页面变化全屏状态，也包括进入和离开全屏的解雇。内部的事件，您可以检查document.fullScreenElement ，看看是否页面全屏与否。如果是全屏的属性将为非空。

退房MDN了解更多详情。

至于你的其他问题：没有，没有办法阻止Esc从现有全屏。就是这样是为了确保用户总是对什么他们的浏览器做控制的妥协。该浏览器将不会给你一个方法，以防止用户退出全屏模式。期。

至于火狐处于渲染比Chrome的慢，我可以向你保证，最实用的目的不是。如果你看到两个浏览器之间的性能差异较大，可能意味着你的JavaScript代码的瓶颈，而不是GPU。

Answer 2:

以下是我做的：

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浏览器，Chrome浏览器与webkit ，火狐/壁虎与moz ，IE 11 MSFullScreenChange ，并支持与实际规格fullscreenchange ，一旦它在所有的浏览器的成功实施。显然，全屏API仅支持在现代的浏览器，所以我没有提供attachEvent旧版本的IE浏览器的回退。

Answer 3:

我使用的约翰·戴尔的代码，与托尼集成，并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);

这仅在12万盎司测试。

请随意扩大

Answer 4:

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

Answer 5:

我微微一变亚历克斯W公司的代码，使仅全屏退出事件触发。经测试，在火狐53.0，铬48.0，和铬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
    }
}

Answer 6:

Mozilla的MDN页面暗示我有关的使用fscreen作为一个与厂商无关的方法来全屏的API。可悲的是，即使在这个非常日期（2018年2月6日），这些API是不完全标准化; Firefox不会默认启用的前缀的的API。

不管怎么说，这是对URL fscreen ： https://github.com/rafrex/fscreen （它可以作为一个npm 。包基于Node.js的建造管道使用）

就目前而言，这似乎是优越的方法给我，直到前缀的API已经登陆，并且容易在所有主要的浏览器。

Answer 7:

所有浏览器都为我工作，除了野生动物园

这是我结束了使用来解决该问题。

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

看看该代码笔。我不得不说，一个巨大的感谢克里斯Ferdinandi他的文章在这里

文章来源: How to detect when a page exits fullscreen?