Chrome浏览器中全屏切换事件未触发

Question

我试图监控浏览器进入全屏模式的时刻。这篇博客被引用为全屏API的指南。 http://robertnyman.com/2012/03/08/using-the-fullscreen-api-in-web-browsers/ 这个SO回答也声称可以使用。 Fullscreen API: Which events are fired? 以下是我的jQuery代码，但它没有触发事件。

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

看起来很简单，但在Chrome中无法触发。你有什么想法我做错了什么吗？

更新：

发现一些新的情况。只有当JavaScript调用requestFullScreen API时，事件才能正常工作，而如果用户按F11则不行。

- Reactgular

Answer 1

fullscreenchange事件可用，但仅在使用requestFullscreen触发全屏模式时才有效。

似乎存在一种安全限制，阻止JavaScript监控用户是否通过热键手动启用全屏模式。

或者，您可以监视调整大小事件，以查看窗口是否与桌面大小匹配，但这对我来说似乎是一种hack（即，这能在双显示器上工作吗？）

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

- Reactgular

---

代码只在全屏模式下起作用。 退出全屏后不起作用。 （在Google Chrome中）我不知道为什么。 - Chris P

Answer 2

作为一个替代方案，onresize事件或者ResizeObserver也应该可以工作。

let field = document.getElementById('textarea');

field.addEventListener('resize', (event) =>
{
    console.log(1, event);
});

let resizeObserver = new ResizeObserver(entries =>
{
    for (let entry of entries)
    {
        console.log(2, entry);
    }
});

resizeObserver.observe(field);

以下方法通常不建议使用 - 会覆盖全局事件，因此addEventListener无法使用。

window.onresize = function(event)
{
    console.log(1, event);
};

相关链接: JavaScript窗口大小重置事件...

- Artfaith