全屏状态下，ESC键无法监听，怎么解决全屏状态下，按ESC键退出时，网页样式问题。

一、事件起因

今天开发时，需要做到全屏功能，因为全屏状态与非全屏状态下的页面样式是需要变化的，所以自己定义的进入全屏与退出全屏的函数，让用户点击全屏按钮可以进入全屏，点击退出全屏按钮，也可以退出全屏，用户的操作可以监听，样式自然也可以监听。

但是浏览器一般都会有自己退出全屏的功能键，就是ESC键可以退出。

 

 所以我百度了esc键对应的是27,所以本来以为下面代码可以发挥效果，但是却是事与愿违。

退出全屏：

document.onkeydown = function (event) {
            var e = event || window.event || arguments.callee.caller.arguments[0];
            if (e && e.keyCode == 27) { // 按 Esc 
                //要做的事情
                alert(1);
　　　　　　　　　　。。。。//调整样式
            }
        }; 

我发现，我第一次按esc的时候，网页虽然可以退出全屏，但是不弹出1，而且退出全屏后样式是乱的。第二次按esc可以弹出1，并且样式代码生效。

起初我认为，可能是浏览器自己定义的esc是无法覆盖的，但是再次查一下资料，发现：

 

 原来全屏状态下，是不能监听ESC的，又是安全机制引起的。

二、解决办法

var isFull ;//用于标识当前屏幕是否为全屏
 
$(window).resize(function () {
    // 处理全屏状态下esc键监听失效
      if (isFull) {//如果是全屏
         isFull = false;//那么设置标识为退出全屏
         。。。//样式处理函数  
  }  
}    

1.设置isFull标识是否为全屏状态；

2.用户点击全屏按钮时，设置isFull为true，并进入全屏；

3.用户按ESC或者自定义的全屏按钮时，触发resize函数，由resize判断当前是否为全屏状态，如果是，则调整样式，并退出全屏。