全屏狀態下，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判斷當前是否為全屏狀態，如果是，則調整樣式，並退出全屏。