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

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);
    }

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

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