文章/答案/技术大牛

发布

社区首页 >问答首页 >requestFullscreen与F11相结合

问requestFullscreen与F11相结合
EN

Stack Overflow用户

提问于 2018-06-30 12:20:27

回答 2查看 166关注 0票数 3

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

但是，用户也可以使用F11转到全屏，这会导致两个问题：

fullscreenElement，的值不受F11的影响，即使在使用F11进行全屏操作之后，F11仍然保持为空。
exitFullscreen不能用于反转由F11设置的全屏集(尽管相反的方法确实有效-- F11可以用requestFullscreen).关闭全屏集)。

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

javascript

html

fullscreen

回答 2

Stack Overflow用户

发布于 2022-09-01 23:18:33

您可以在应用程序中拦截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);

票数 1

Stack Overflow用户

发布于 2020-10-19 09:40:55

功能不同，F11是浏览器的全屏，requestFullscreen是Dom全屏显示

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/51114885

复制

相似问题

问requestFullscreen与F11相结合
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问requestFullscreen与F11相结合EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问requestFullscreen与F11相结合
EN