1

我在 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 才会使按钮返回。

任何人都知道为什么在全屏模式下不触发 keyup 处理程序？

4

2 回答 2

0

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

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

— MDN：使用全屏模式

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

通知

成功启用全屏模式后，包含该文档的文档会收到一个 mozfullscreenchange 事件。当退出全屏模式时，文档再次收到 mozfullscreenchange 事件。请注意，mozfullscreenchange 事件本身不提供有关文档是进入还是退出全屏模式的任何信息，但如果文档具有非 null mozFullScreenElement，则您知道您处于全屏模式。

— MDN：使用全屏模式

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

于 2013-09-19T21:32:54.100 回答
0

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

/* 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 上也能正常工作。

于 2013-09-19T21:51:57.043 回答