Javascript 全屏API和键控事件

我在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外，还有其他退出全屏模式的方法：

/* 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');
    }
}

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

-

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

通知 当全屏模式成功启用时，将显示 包含接收mozfullscreenchange事件的文档什么时候 退出全屏模式时，文档再次收到 mozfullscreenchange事件。请注意，mozfullscreenchange事件 不提供任何关于文档是否为 进入或退出全屏模式，但如果文档具有非 空mozFullScreenElement，您知道您处于全屏模式

-

---

以下是供应商前缀列表：

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

/* 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');
    }
}

在Android上也能正常工作