js实现全屏和退出全屏功能-蒲公英云

js实现全屏和退出全屏功能

主要是全屏和退出全屏事件，以及相应的操作（采用window.onresize监测）

$(function(){ 
    //全屏
    $("#fullScreen").on("click",function(){ 
        fullScreen();
    })
    //退出全屏
    $("#exitFullScreen").on("click",function(){ 
        exitFullscreen();
    })
})
//fullScreen()和exitScreen()有多种实现方式，此处只使用了其中一种
//全屏
function fullScreen() { 
    var element = document.documentElement;
    if (element.requestFullscreen) { 
        element.requestFullscreen();
    } else if (element.msRequestFullscreen) { 
        element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) { 
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) { 
        element.webkitRequestFullscreen();
    }
}
//退出全屏 
function exitFullscreen() { 
    if (document.exitFullscreen) { 
        document.exitFullscreen();
    } else if (document.msExitFullscreen) { 
        document.msExitFullscreen();
    } else if (document.mozCancelFullScreen) { 
        document.mozCancelFullScreen();
    } else if (document.webkitExitFullscreen) { 
        document.webkitExitFullscreen();
    }
}
//监听window是否全屏，并进行相应的操作,支持esc键退出
window.onresize = function() { 
    var isFull=!!(document.webkitIsFullScreen || document.mozFullScreen || 
        document.msFullscreenElement || document.fullscreenElement
    );//!document.webkitIsFullScreen都为true。因此用!!
    if (isFull==false) { 
        $("#exitFullScreen").css("display","none");
        $("#fullScreen").css("display","");
    }else{ 
        $("#exitFullScreen").css("display","");
        $("#fullScreen").css("display","none");
    }
}
补充：
!和!!的区别
! 变量转换成boolean类型判断，null、undefined和空字符串取反都为false，其余都为true。
!! 用来做类型判断
if(a!=null&&typeof(a)!=undefined&&a!=’’){ }
等价于if(!!a){ }