全屏更改事件未在 Chrome 中触发答案

【问题标题】：fullscreenchange event not firing in Chrome全屏更改事件未在 Chrome 中触发
【发布时间】：2014-02-01 22:02:26
【问题描述】：

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

在我搜索的任何地方都会引用此博客作为全屏 API 的指南。

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

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

这是我的 jQuery 代码，但它没有触发事件。

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

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

更新：

发现了一些新东西。这些事件只有在 JavaScript 调用 requestFullScreen API 时才会起作用，但如果用户按下 F11 则不会。

【问题讨论】：

标签： javascript jquery google-chrome fullscreen

【解决方案1】：

fullscreenchange 事件确实有效，但前提是全屏模式由 requestFullscreen 触发。

如果用户通过热键手动启用全屏模式，似乎有一个安全限制阻止 JavaScript 监控。

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

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

【讨论】：

document.addEventListener("keydown", e => { if(e.key == "F11") e.preventDefault(); }); 仅在全屏时有效。退出全屏时不起作用。（在谷歌浏览器中）我不知道为什么。

【解决方案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 window resize event...

【讨论】：