1

我正在使用这个插件在我的网站上制作一个 Flash 视频全屏显示。为了使全屏正常工作，当用户单击按钮进入和退出全屏时，我还使用一些 javascript 在 div 上添加和删除全屏类。

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

此外，我不是一个 javascript 编码器，因此将不胜感激很多帮助。

4

2 回答 2

3

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

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

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

function exitHandler() {
    if (!document.webkitIsFullScreen && !document.mozFullScreen && !document.msFullscreenElement) {
        var myDiv = document.getElementById("myDivId");
        myDiv.classList.remove("fullscreen");
    }
}
于 2017-09-12T04:59:32.763 回答
0

您可以在文档上绑定事件

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

    if(e.which == 27){
          //add remove class.
     }
})
于 2013-03-17T20:12:09.370 回答