全屏狀態下的ESC鍵監聽處理

我又來分享好東西了
直奔主題 今天分享的內容是頁面的全屏功能(同時跳轉頁面)
這個的關鍵就是當全屏以後,我想通過按下esc鍵,同時進行一些處理,比如:當手動全屏的時候我跳轉展示第三方的頁面文件,取消全屏後,我還能保持全屏之前的頁面樣式不能亂,關鍵代碼就是根據窗口變化進行處理,

window.addEventListener("resize", function () {
        // debugger
        if (!checkFull()) {
            // 全屏下按鍵esc後要執行的動作
            // isclick 爲true 此時爲全屏狀態  false 爲非全屏狀態
            if(!isclick){
                console.log('按下esc鍵退出全屏')
                isFullscreen = false
            }else{
                isFullscreen = false
            }
        }
 });
document.addEventListener('fullscreenchange', function(){ console.log('切換模式了'); isclick == false ? isclick = true : isclick = true; });
//監測是否按下esc鍵
function checkFull () {
      var isFull = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
      if (isFull == undefined)  isFull = false;
      return isFull;
}

關鍵代碼就是上面的;
下面是相關demo
鏈接:https://pan.baidu.com/s/1-rzaZaNx-fTUVDyOvKfUzg
提取碼:zkqi

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章