在Chrome/Firefox中全屏按下转义时,不会触发Keydown事件

Question

我有这个网站,这是我的下一个投资组合网站:http: //lantosistvan.com/temp/viewport-images/

在右下角,我有一个锚标记,它触发下一个javascript:

$(".expand").on("click", function() {
    $(document).toggleFullScreen();
    $("#header-container, #footer-container").toggleClass('toggle-display');
    $("header, footer").toggleClass('toggle-height');
    $("a.expand").toggleClass('toggle-bottom');
});

$(window).on("keydown", function(e) {
    var code = (e.keyCode ? e.keyCode : e.which);
    if (code == 27, 122) {
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom')
    }
});

第一个代码将触发Klaus Reimer的"jquery.fullscreen 1.1.4".js:https://github.com/kayahr/jquery-fullscreen-plugin

下一行将在css"toggle-display"中添加一个类,它隐藏了"#header-container"和"#footer-container"."Toggle-height"为"标题"和"页脚"(30px)提供了新的高度,"toggle-bottom"将为按钮提供新的右下边距.

如果我使用按钮切换,这很有效.但是,如果有人使用ESC(在Firefox中)或ESC和F11(在Chrome中)按钮,该网站将从全屏退出,但注入的CSS更改仍然保持不变.这将打破整个体验.

所以当有人按ESC或F11时,我创建了第二个代码组,我删除了这些类.

问题:

• 在Firefox中,F11非常棒!它正在删除类,因此,垂直图像高度javascript也保持图像高度和宽高比没有问题.
• 但是如果按ESC键,它将从全屏退出,但不会删除类.您需要再次按ESC或F11,才能运行代码.但是,jquery.fullscreen仍然运行(因为没有任何关闭调用).如果您第二次按相同的键,则图像垂直简单不适合视口UNTIL您以某种方式更改了浏览器视口大小(例如:进入窗口模式并更改浏览器大小).
• Chrome也有同样的问题,但由于Chrome也会使用F11进入原生全屏,因此也会出现问题.

如果单击右下方按钮,按ESC键,再按一下按钮,功能就会打开.现在它将进入全屏,就像按F11一样.如果有人用F11进入全屏并且他可以看到整个网站,我没有问题.我不想限制我的用户选项.F11没有动过,对我来说很好.

有没有任何解决方案,原生全屏API将首先触发我的javascript线？当我离开全屏？

更新2013.09.14. 我认为这是一个与Webkit相关的问题.为什么它在Firefox(F11)中不使用本机退出键,而不使用本机退出键(ESC),即使我一直处于本机全屏模式......？我们能以某种方式欺骗吗？

更新2013.09.15. 通过koala_dev:

$(".expand").on("click", function() {
    $(document).toggleFullScreen();
});

$(document).on("fullscreenchange", function() {
    if($(document).fullScreen()){
        //Just went into fullscreen
        $("#header-container, #footer-container").addClass('toggle-display');
        $("header, footer").addClass('toggle-height');
        $("a.expand").addClass('toggle-bottom');
    }else{
        //Just exit fullscreen
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom');
    }
});

更新2013.09.16 - 解决方案!

没有帮助调用atmeretezo()内部fullscreenchange事件,所以我做了一点搜索.事实证明有一个:fullscreenCSS伪类!:)

https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html

https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode

http://www.sitepoint.com/html5-full-screen-api/

所以我用这个替换了js:

// https://dvcs.w3.org/hg/fullscreen/raw-file/tip/Overview.html
// https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode
// http://www.sitepoint.com/html5-full-screen-api/
$(document).ready(function(){
    function toggleFullScreen() {
      if (!document.fullscreenElement &&    // alternative standard method
          !document.mozFullScreenElement && !document.webkitFullscreenElement) {  // current working methods
        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);
        }
      } else {
        if (document.cancelFullScreen) {
          document.cancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        }
      }
    }

    $(".expand").on("click", function() {
        toggleFullScreen();
    });
});

我将这些行添加到CSS中:

/* EXPAND */
:-webkit-full-screen #header-container { display: none; visibility: hidden; }
:-webkit-full-screen #footer-container { display: none; visibility: hidden; }
:-moz-full-screen #header-container { display: none; visibility: hidden; }
:-moz-full-screen #footer-container { display: none; visibility: hidden; }
:fullscreen #header-container { display: none; visibility: hidden; }
:fullscreen #footer-container { display: none; visibility: hidden; }

:-webkit-full-screen header { height: 30px; }
:-webkit-full-screen footer { height: 30px; }
:-moz-full-screen header { height: 30px; }
:-moz-full-screen footer { height: 30px; }
:fullscreen header { height: 30px; }
:fullscreen footer { height: 30px; }

:-webkit-full-screen a.expand { bottom: 5px; }
:-moz-full-screen a.expand { bottom: 5px; }
:fullscreen a.expand { bottom: 5px; }
/* EXPAND */

你不能将更多的div分成一行,否则不会起作用(我不知道为什么,浏览器会忽略代码的原因).

它完美无缺!F11未受影响,Chrome,Firefox在原生全屏API模式下完美调整图像大小,CSS代码仅针对全屏修改!

Answer 1

您应该使用插件提供的通知事件来提醒全屏状态的变化：

$(document).on("fullscreenchange", function() {
    if($(document).fullScreen()){
        //Just went into fullscreen
        $("#header-container, #footer-container").addClass('toggle-display');
        $("header, footer").addClass('toggle-height');
        $("a.expand").addClass('toggle-bottom');
    }else{
        //Just exit fullscreen
        $("#header-container, #footer-container").removeClass('toggle-display');
        $("header, footer").removeClass('toggle-height');
        $("a.expand").removeClass('toggle-bottom');
    }
});

您甚至可以在没有 if/else 的情况下完成此操作，并仅使用toggleClass 而不是添加/删除