javascript - 结合请求全屏和 F11

Question

我有一个带有按钮的页面，允许用户将页面设置为全屏。我使用 requestFullscreen(实际上是 webkitRequestFullScreen，因为我在 Chrome 中进行测试，但这个问题普遍适用)。所有这一切都很好。

但是，用户也可以使用 F11 进入全屏，这会导致两个问题:

1. F11 不影响 fullscreenElement 的值，即使在使用 F11 进入全屏后该值仍为 null。
2. exitFullscreen 不能用于反转 F11 设置的全屏(尽管反转确实有效 - F11 可以关闭使用 requestFullscreen 设置的全屏)。

有没有办法结合 F11 功能和全屏 API？

Answer 1

您可以在应用程序中拦截 F11 键盘事件并改为调用 requestFullscreen API。用户应该看不出他们使用 F11、按钮、链接等有什么区别。

var isFullScreen = false;
function handleWindowKeydownEvent(event = {}) {
    if(event.code === 'F11') {
        event.preventDefault();
        if(isFullScreen) {
            isFullScreen = false;
            window.document.exitFullscreen().catch((err) => {
                console.log(err);
            });
        } else {
            isFullScreen = true;
            window.document.documentElement.requestFullscreen().catch((err) => {
                console.log(err);
            });
        }
    }
}
window.addEventListener('keydown', handleWindowKeydownEvent);