我又來分享好東西了
直奔主題 今天分享的內容是頁面的全屏功能(同時跳轉頁面)
這個的關鍵就是當全屏以後,我想通過按下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