7

我有这个网站，这是我的下一个投资组合网站： 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 来运行代码。但是，jquery.fullscreen 仍在运行（因为没有任何关闭呼叫）。如果您第二次按相同的键，图像垂直简单不适合视口，直到您以某种方式更改浏览器视口大小（例如：进入窗口模式并更改浏览器大小）。
  • 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 代码仅针对全屏修改！

4

1 回答 1

2

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

$(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 而不是添加/删除

于 2013-09-15T08:19:24.017 回答