js实现全屏与退出全屏

div代码

<button id="fullScreen"><font color="red"><i class="fa fa-arrows-alt" title="全屏"></i></font></button>
<button id="exitFullScreen"><font color="red"><i class="fa fa-arrows-alt" title="退出全屏"></i></font></button>

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实现退出全屏

//esc退出全屏写法 (固定写法) ,用键盘对应的code码不能实现
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");
    }
}