Question

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

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

当处于全屏模式时，按钮消失，但是只有当我再次点击正常模式时再次点击ESC时，单击ESC才会返回按钮。

任何人都知道为什么没有在全屏模式下触发密钥处理程序？

Answer 1

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

此外，导航到其他页面，更改标签或切换   到了另一个应用程序（例如，使用Alt-Tab）   全屏模式也退出全屏模式。

- MDN: Using fullscreen mode

因此，你应该听一下官方活动：

通知

当全屏模式成功启用时，文件在哪   包含文档接收mozfullscreenchange事件。 ：当   退出全屏模式，文档再次收到   mozfullscreenchange事件。请注意mozfullscreenchange事件   不提供任何关于文件是否是的信息   进入或退出全屏模式，但是如果文档有非   null mozFullScreenElement，您知道自己处于全屏模式。

- MDN: Using fullscreen mode

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

Answer 2

好吧，删除按钮实际上不是最好的主意。以下代码可以正常进入和退出全屏模式：

/* 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。

全屏API和keyUp事件

2 个答案:

通知