js点击按钮分别实现全屏以及退出全屏的方法

今天在做一个小项目的时候发现，某些网页需要全屏，但是我们打开的网页并非是全屏的，这就需要我们用一个按钮去实现这个全屏事件。
然后我上网查了一下，发现关于js全屏的方法有很多，但是有很多可能是由于浏览器兼容性的原因，没有办法体现出相对应的效果。经过多方的信息采集以及验证之后，终于是成功实现了网页全屏的方法。话不多说，直接上代码。

<script>
//定义一个变量进行判断，默认false 非全屏状态
		var exitFullscreen = false
		// 全屏事件
		function handleFullScreen() {
			var element = document.documentElement;
			if(this.fullscreen) {
				if(document.exitFullscreen) {
					document.exitFullscreen();
				} else if(document.webkitCancelFullScreen) {
					document.webkitCancelFullScreen();
				} else if(document.mozCancelFullScreen) {
					document.mozCancelFullScreen();
				} else if(document.msExitFullscreen) {
					document.msExitFullscreen();
				}
			} else {
				if(element.requestFullscreen) {
					element.requestFullscreen();
				} else if(element.webkitRequestFullScreen) {
					element.webkitRequestFullScreen();
				} else if(element.mozRequestFullScreen) {
					element.mozRequestFullScreen();
				} else if(element.msRequestFullscreen) {
					// IE11
					element.msRequestFullscreen();
				}
			}
		}
		</script>

js关于网页全屏的代码准备好了，然后就是设置按钮，并把点击事件放进去：

<input type="button"  onclick="handleFullScreen()" value="全屏显示ʾ"/>

设置完成之后，就可以实现通过按钮控制网页全屏的效果了，但是问题相对应的又来了，全屏之后 ，如何退出全屏？
废话不多说，直接上代码：

<script>
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");
    }
}
</script>

js的代码完成了，接下来就是创建一个按钮来实现相对应的点击事件了：

<input  type="button"  onclick="exitFullscreen()" value="退出全屏"/>

将这四者全部安排到位之后，我们在使用HTML的时候就可以分别通过全屏按钮，以及退出全屏按钮实现相对应的网页全屏以及退出全屏了，另外，这个js脚本同意支持esc键退出全屏。
希望这篇分享能够帮助到正在学习HTML的伙伴们！学无止境，加油！