全屏效果想必我们都很清楚把,平时追剧看电视剧什么都会使用全屏方便我们看,我们键盘的第一个键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() : '' } }