在 Chrome/Firefox 中全屏按 Escape 时未触发 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" 为 "header" 和 "footer" (30px) 提供了新的高度，而 "toggle-bottom" 将为按钮提供新的右边距和下边距。

如果我用按钮切换，这很好用。但是，如果有人使用 ESC（在 Firefox 中）或 ESC 和 F11（在 Chrome 中）按钮，则站点会从全屏中转义，但注入的 CSS 更改保持不变。这会破坏整个体验。

所以我创建了第二个代码组，当有人按 ESC 或 F11 时，我删除了类。

问题：

• 在 Firefox 中，F11 效果很好！它正在删除课程，因此， 垂直图像高度 javascript 还保持图像高度和 纵横比没有问题。
• 但是如果你按 ESC，它会从全屏退出，但不会删除 类。您需要再次按 ESC 或 F11 来运行代码。但 THAN，jquery.fullscreen 仍在运行（因为没有关闭 称呼）。如果您第二次按相同的键，图像垂直 简单不适合视口，直到您进行更改 浏览器视口大小以某种方式（例如：进入窗口模式和 更改浏览器大小）。
• Chrome也有同样的问题，但是因为Chrome进入native 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 更新 - 解决方案！

在fullscreenchange 事件中没有帮助调用atmeretezo()，所以我做了一点搜索。原来有一个:fullscreen CSS 伪类！ :)

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

您应该使用插件提供的notification event 来提醒全屏状态的变化：

$(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 而不是添加/删除的情况下完成此操作