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

Posted 2023-02-22

【中文标题】全屏更改事件未在 Chrome 中触发

【英文标题】：fullscreenchange event not firing in Chrome

【发布时间】：2014-02-01 22:02:26

【问题描述】：

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

在我搜索的任何地方都会引用此博客作为全屏 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 则不会。

【参考方案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...