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，所以我进行了一些搜索。事实证明有一个: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而不是添加/删除

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

1 个答案: