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

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

设置全屏

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

设置退出全屏

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

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

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

// 进入全屏和退出全屏的点击事件function fscreen() {var el = document.documentElementvar isFullscreen = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreenif (!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() :''}}