fullscreenchange事件在Chrome中未触发 [英] fullscreenchange event not firing in Chrome

问题描述

我试图监视浏览器何时进入全屏模式。

这个博客在我搜索全屏API的指南时被引用。 http://robertnyman.com/2012/03/08/using-the-fullscreen-api-in-web-browsers/rel =nofollow noreferrer> http://robertnyman.com/2012/03/08/使用全屏api-in-web-browsers /

这个答案也声称这是有效的。

全屏API：哪些事件被解雇？ p>

这是我用jQuery编写的代码，但它并没有激发事件。

  $（document）.on（webkitfullscreenchange mozfullscreenchange fullscreenchange，function（）{
 console.log（bang！）; 
}）; 
  

看起来很简单，但在Chrome中不会触发。任何想法我做错了什么？

更新：

新。只有当JavaScript调用 requestFullScreen API时，事件才有效，但如果用户按下 F11 ，则不会发生。

全屏变更事件可以工作，但仅当全屏模式由 requestFullScreen 。

如果用户通过热键手动启用全屏模式，似乎存在一种安全限制，可阻止JavaScript进行监视。 b
$ b

或者，您可以监视调整大小事件以查看窗口是否与桌面大小相匹配，但是这对我来说似乎是一种破解（即，这是否适用于双显示器？）

我决定放弃监视全屏模式，只使用API​​切换状态。

I'm trying to monitor when the browser enters fullscreen mode.

This blog is referenced everywhere I search as the guide on the fullscreen API.

http://robertnyman.com/2012/03/08/using-the-fullscreen-api-in-web-browsers/

This SO answer also claims this works.

Fullscreen API: Which events are fired?

Here is my code with jQuery, but it's not firing the event.

$(document).on("webkitfullscreenchange mozfullscreenchange fullscreenchange",function(){
        console.log("bang!");
});

Seems simple enough, but it doesn't fire in Chrome. Any idea what I'm doing wrong?

UPDATE:

Discovered something new. The events are working only if JavaScript calls the requestFullScreen API, but not if the user presses F11.

解决方案

fullscreenchange events do work, but only if the fullscreen mode is triggered by requestFullScreen.

There appears to be a security restriction that prevents JavaScript from monitoring if a user manually enables fullscreen mode via a hotkey.

Alternatively, you can monitor the resize events to see if the window matches the desktop size, but this seems like a hack to me (i.e. would this work on dual-monitors?)

I decided to abandon monitoring of fullscreen mode, and just use the API to toggle the state.

这篇关于fullscreenchange事件在Chrome中未触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！