js实现全屏与退出全屏

js代码

$(function(){
	$("#fullScreen").click(function(){
		fullScreen();
		$(this).css("display","none");
		$("#exitFullScreen").css("display","");
	})
	
	$("#exitFullScreen").click(function(){
		exitFullscreen();
		$(this).css("display","none");
		$("#fullScreen").css("display","");
	})
})

//全屏
function fullScreen() {
    var element = document.documentElement;
    if (element.requestFullscreen) {//W3C浏览器
        element.requestFullscreen();
    } else if (element.msRequestFullscreen) {//IE
        element.msRequestFullscreen();
    } else if (element.mozRequestFullScreen) {//firefox
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullscreen) {//chrome
        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();
    }
}

//esc退出全屏写法 (固定写法) ,code码不能实现  (注意同一页面 onresize 的调用冲突问题) 
window.onresize = function() {
    var isFull=!!(document.webkitIsFullScreen || document.mozFullScreen || 
        document.msFullscreenElement || document.fullscreenElement
    );
    if (isFull==false) {
        $("#exitFullScreen").css("display","none");
        $("#fullScreen").css("display","");
    }else{
        $("#exitFullScreen").css("display","");
        $("#fullScreen").css("display","none");
    }
}