javascript - jquery获取title内容 - js修改页面title



如何检测页面何时退出全屏? (4)

Mozilla的MDN页面暗示我使用fscreen作为全屏API的供应商不可知方法。 可悲的是,即使在这个日期(2018-02-06),这些API还没有完全标准化; Firefox默认情况下没有启用未加前缀的API。

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

目前,这似乎是我的优秀方法,直到没有前缀的API登陆并且在所有主流浏览器中都可以使用。

https://ffff65535.com

我正在用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);

此外,当有人将鼠标指向页面顶部时,是否有办法阻止令人讨厌的标题出现? 而且,我想我可以阻止逃避在Firefox和Chrome中使用preventDefault做它的功能(退出全屏)?

而且,有没有人知道为什么Firefox在3D渲染中比Chrome慢得多? 我的意思是,我正在使用WebGL,这意味着正在使用GPU!

编辑:

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


全屏规范指定在页面的全屏状态发生变化时对文档触发"fullscreenchange" (带有适当的前缀)事件,包括进出全屏。 在该事件中,您可以检查document.fullScreenElement以查看该页面是否为全屏。 如果是全屏,则该属性将为非null。

查看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中测试过。

请随意扩大


我略微更改了Alex W的代码,仅在全屏退出时触发事件。 在Firefox 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
    }
}  




webgl