在一些场景中我们希望网页能够全屏显示，这样可展示的区域更大，也就是隐藏浏览器的地址栏和页签栏，上代码
为了方便调用直接进行了封装，同时也做了兼容性处理，（如果你觉得我代码写的垃圾让你不知道该怎么调，那你就看最后面有调用说明代码）// 判断是否处于全屏显示export function isFullScreen() {if (document.fullscreen) {return true;} else if (document.mozFullScreen) {return true;} else if (document.webkitIsFullScreen) {return true;} else if (document.msFullscreenElement) {return true;} else if (window.fullScreen) {return true;} return false;}// 浏览器全屏显示// 启动全屏!// launchFullScreen(document.documentElement); // 整个网页// launchFullScreen(document.getElementById("videoElement")); // 某个页面元素export function launchFullscreen(element) {if(isFullScreen()){// 如果用户在全屏模式下测退出全屏exitFullscreen()return false}if (element.requestFullscreen) {element.requestFullscreen();return true} else if (element.mozRequestFullScreen) {element.mozRequestFullScreen();return true} else if (element.webkitRequestFullscreen) {element.webkitRequestFullscreen();return true} else if (element.msRequestFullscreen) {element.msRequestFullscreen();return true}}// 退出全屏export function exitFullscreen() {if (document.exitFullscreen) {document.exitFullscreen();} else if (document.mozCancelFullScreen) {document.mozCancelFullScreen();} else if (document.webkitExitFullscreen) {document.webkitExitFullscreen();}}
使用的时候只要引入 launchFullscreen 就可以了，该方法调用结果：如果当前处于全屏状态就退出全屏，如果非全屏状态就进入全屏；废话有点多了，上代码
import {launchFullscreen} from '... ...js'launchFullScreen(document.documentElement); // 整个网页launchFullScreen(document.getElementById("videoElement")); // 某个元素
到这里应该就ok了，其它两个辅助方法你也可以自己选择调用
找有bug的代码，你就关注老表，专业写bug，嘿嘿，点赞如果觉得《网页全屏显示以及退出全屏 包括单个元素全屏显示》对你有帮助，请点赞、收藏，并留下你的观点哦！
