Question

我正在使用this plugin在我的网站上制作Flash视频全屏。为了让全屏工作正常，我还使用一些javascript来添加和删除div上的全屏类，当用户点击按钮进入和退出全屏时。

当用户使用转义键退出全屏模式而不是按钮时，我遇到了一个小问题。当使用转义键时，全屏类会被删除，这会使布局略微抛出。有没有办法检测退出键何时用于退出全屏然后删除全屏类？

此外，我不是一个javascript编码器，所以非常感谢很多帮助。

Answer 1

退出全屏模式时，Chrome不会触发按键事件。你需要定义一个事件监听器来监听全屏模式的变化，就像这样（这个东西没有很好地标准化，所以你需要监听不同浏览器触发的事件）：

    if (document.addEventListener) {
        document.addEventListener('webkitfullscreenchange', exitHandler, false);
        document.addEventListener('mozfullscreenchange', exitHandler, false);
        document.addEventListener('fullscreenchange', exitHandler, false);
        document.addEventListener('MSFullscreenChange', exitHandler, false);
    }

然后，当浏览器触发此事件时，它将调用＆＃39; exitHandler＆＃39;您定义的函数，并且当用户退出全屏模式时，您可以通过执行以下操作从div中删除该类：

function exitHandler() {
    if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
        var myDiv = document.getElementById("myDivId");
        myDiv.classList.remove("fullscreen");
    }
}

Answer 2

您可以在文档上绑定事件

document.addEventListener('keyup', function(e){ 

    if(e.which == 27){
          //add remove class.
     }
})

从全屏按下转义时更改CSS类

2 个答案: