前端JS实现全屏和退出全屏的效果

全屏效果想必我们都很清楚把，平时追剧看电视剧什么都会使用全屏方便我们看，我们键盘的第一个键esc可以退出全屏，那么我们如何用js实现全屏的办法呢？

设置全屏

Document.requestFullscreen()，该方法用于异步请求使元素进入全屏模式，结果会返回一个promise。

设置退出全屏

Document.exitFullscreen()，该方法可以使当前文档退出全屏模式。使元素恢复到之前的状态。

判断进入全屏和退出全屏的点击事件，给html中绑定fscreen（）的点击事件

这样第一次点击时就会变成全屏，第二次点击时就会退出全屏并重复此次操作。

// 进入全屏和退出全屏的点击事件
			function fscreen() {
				var el = document.documentElement
				var isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen
				if (!isFullscreen) {
					//进入全屏
					;
					(el.requestFullscreen && el.requestFullscreen()) ||
					(el.mozRequestFullScreen && el.mozRequestFullScreen()) ||
					(el.webkitRequestFullscreen && el.webkitRequestFullscreen()) ||
					(el.msRequestFullscreen && el.msRequestFullscreen())
				} else {
					//退出全屏
					document.exitFullscreen ?
						document.exitFullscreen() :
						document.mozCancelFullScreen ?
						document.mozCancelFullScreen() :
						document.webkitExitFullscreen ?
						document.webkitExitFullscreen() :
						''
				}
			}