全屏 API 和键控事件

Fullscreen API and keyUp event

本文关键字：事件 API 全屏      更新时间：2023-09-26

我在Chrome和FF中使用全屏API，为用户提供了一个按钮，可以使用如下代码进行切换：

function initFullscreen() {
    $('#fullscreen').on('click', function(e) {
        requestFullscreen();
        $('#fullscreen').fadeOut();
    });
    $(document).keyup(function(e) {
        // esc
        if (e.keyCode == 27) { 
            $('#fullscreen').fadeIn();
        }   
    });
}

在全屏模式下，按钮会消失，但仅当我再次处于正常模式时再次单击 ESC 时，单击 ESC 才会恢复该按钮。

有人知道为什么在全屏模式下不触发键控处理程序吗？

这并不能真正回答您的具体问题，但您可以尝试另一种解决方案，该解决方案应该比您的更好。除 ESC 外，还有其他方法可以退出全屏模式：

此外，导航到另一个页面、更改选项卡或切换到另一个应用程序（例如，使用 Alt-Tab），而在全屏模式也会退出全屏模式。

— MDN：使用全屏模式

因此，您应该收听官方活动：

通知

成功启用全屏模式后，文档包含接收 MozfullScreenChange 事件的文档。什么时候退出全屏模式，文档再次收到Mozfullscreenchange 事件。请注意，mozfullscreenchange 事件本身不提供任何关于文档是否进入或退出全屏模式，但如果文档具有非null mozFullScreenElement，你知道你处于全屏模式。

— MDN：使用全屏模式

以下是供应商前缀的列表：https://stackoverflow.com/a/9775411/603003

好吧，删除按钮实际上不是最好的主意。以下代码可以很好地进入和离开全屏模式：

/* init fullscreen mode */
function initFullscreen() {
    $('#fullscreen').on('click', function(e) {
        toggleFullscreen();
    });
}
function toggleFullscreen() {
    if (!document.fullscreenElement &&    
        !document.mozFullScreenElement && !document.webkitFullscreenElement) {  
        if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
        } else if (document.documentElement.mozRequestFullScreen) {
            document.documentElement.mozRequestFullScreen();
        } else if (document.documentElement.webkitRequestFullscreen) {
            document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
        }
        $('#fullscreen').text('Leave Fullscreen');
    } 
    else {
        if (document.cancelFullScreen) {
            document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        }
        $('#fullscreen').text('Fullscreen Mode');
    }
}

在安卓上也能工作。

相关文章：