第一次对网页的全屏模式有概念，就是那种全屏-播放视频的网页的屏幕播放。感觉很强烈。几周前，需要全屏模式。接触之后才知道，全屏模式并不神秘。很容易掌握的技能。。。博客，前端积累的文档，公众号，GitHubCodePenDemo地址：进去看看demo和代码，玩玩。本文将结合本demo进行讲解。全屏功能封装在一个类中：我把全屏模式封装在一个类中，代码中有详细注释。需要的话，直接把类拿出来，按照栗子和注释来使用即可。代码在codepen演示中。什么是全屏？MDN介绍：使用提供的API让一个元素及其子元素占据整个屏幕，并在这段时间内，从屏幕上隐藏所有浏览器用户界面和其他应用程序。chrome下的全屏表现：全屏会隐藏标签栏和书签栏。如果一开始网页没有完全打开，在全屏下，要全屏的元素也会充满整个屏幕。可以使用多层全屏，如在Chestnut中，可以从左侧全屏开始，然后是红色全屏。这种情况下，如果退出全屏，只会退出红色全屏，回到左边的全屏，所以页面还是全屏模式。进入全屏时，默认提示：'Pressesctoexitfullscreenmode'，如下图：按Esc或调用退出全屏方法时，退出全屏。标签栏和书签栏仍然隐藏，网页上的元素恢复到原来的大小。要显示书签栏和标签栏，需要刷新页面。全屏API：一共使用了6个API：浏览器是否支持全屏模式：document.fullscreenEnabled使元素进入全屏模式：Element.requestFullscreen()退出全屏：document.exitFullscreen()检查是否有节点当前处于全屏状态：文档。fullscreenElement进入全屏/离开全屏，触发事件：document.fullscreenchange无法进入全屏时触发：document.fullscreenerror浏览器前缀：目前并不是所有的浏览器都实现了无前缀版本的API，所以我们需要针对不同的浏览器，做someAPIcompatibility:这个是我在demo中做的浏览器兼容性：/***@description:是否支持全屏+判断浏览器前缀*@param{Function}fn不支持全屏的回调函数这里是一组默认值*/isFullscreen(fn){letfullscreenEnabled;//判断浏览器前缀if(document.fullscreenEnabled){fullscreenEnabled=document.fullscreenEnabled;}elseif(document.webkitFullscreenEnabled){fullscreenEnabled=document.webkitFullscreenEnabled;名字=这个。'网络工具包';}elseif(document.mozFullScreenEnabled){fullscreenEnabled=document.mozFullScreenEnabled;this.prefixName='moz';}elseif(document.msFullscreenEnabled){fullscreenEnabled=document.msFullscreenEnabled;this.prefix'Name='}if(!fullscreenEnabled){if(fn!==未定义）fn（）；//执行不支持全屏的回调this.isFullscreenData=false;}}我在实例化的时候判断浏览器是否支持全屏，然后保存浏览器前缀。推荐这样做，因为如果每个API都要这样反复判断浏览器前缀，太恶心了！1、浏览器是否支持全屏模式：document.fullscreenEnableddocument.fullscreenEnabled属性返回一个布尔值，表示当前文档是否可以切换到全屏模式。这些代码在上面的浏览器前缀代码中给出。如果不保存浏览器前缀，注意不同浏览器前缀的兼容性！下面不再强调。2.让元素进入全屏模式：Element.requestFullscreen()/***@description:让传入的元素全屏*@param{String}domName要全屏的dom名称*/Fullscreen(domName){const元素=文档。查询选择器（域名）；//获取domconstmethodName=this.prefixName===''?'requestFullscreen'：`${this.prefixName}RequestFullScreen`；//API前缀element[methodName]();//callfullscreen}这就是我们的全屏API，是不是超级简单？值得注意的是，调用该API并不能保证元素可以进入全屏模式MDN：例如，
