我正在使用this plugin在我的网站上制作Flash视频全屏。为了让全屏工作正常,我还使用一些javascript来添加和删除div上的全屏类,当用户点击按钮进入和退出全屏时。
当用户使用转义键退出全屏模式而不是按钮时,我遇到了一个小问题。当使用转义键时,全屏类会被删除,这会使布局略微抛出。有没有办法检测退出键何时用于退出全屏然后删除全屏类?
此外,我不是一个javascript编码器,所以非常感谢很多帮助。
答案 0 :(得分: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");
}
}
答案 1 :(得分:0)
您可以在文档上绑定事件
document.addEventListener('keyup', function(e){
if(e.which == 27){
//add remove class.
}
})