有些内容只是全屏显示，例如您网站上的选择图片或视频。当我说全屏时，我的意思是占用整个用户屏幕，没有任何浏览器chrome或甚至后台应用程序妨碍。使用Fullscreen API，只需几行JavaScript代码，您就可以将焦点放在您网站上任何值得信赖的内容上，比如说您对此感到非常自豪并且刚刚发布在您的旅行博客上的壮观海岸照片（照片来源：PixaBay）：
在全屏幕中打开元素
全屏API的核心是requestFullscreen()方法，可以在文档中的任何元素上调用它以使其成为kaboom：
1 2 3 4 |
|
IE 11+支持FullScreen API，桌面上支持所有现代版Chrome和Firefox。需要注意的是，在编写本文时，仍然需要使用前缀来访问构成API的相关方法和事件处理程序的受支持版本。requestFullscreen()例如，对于主要方法，存在以下3个附加版本以满足3个主要浏览器：
| requestFullscreen（）（标准版） |
| webkitRequestFullscreen（） |
| mozRequestFullScreen（） |
| msRequestFullscreen（） |
跨浏览器requestFullscreen（）方法
跨浏览器全屏功能：让我们创建一个跨浏览器版本， requestFullscreen()我们可以在页面上的任何元素上使用，这样我们每次使用它时都不会迷失在if / else语句的海洋中：
1 2 3 4 五 |
|
当我们打电话时getreqfullscreen()，我们会requestFullscreen()在浏览器中获得支持的版本 。然后，为了调用实际方法，我们在它上面调用，通过传入我们使用的元素进行全屏来为方法提供所需的上下文。 call()call()
示例：让我们在CSS类“ canfullscreen” 上获取所有图像，以便在点击时全屏显示（照片来源：PixaBay）：
1 2 3 4 五 6 7 |
|
易如反掌！
注意：要调用requestFullscreen()文档本身以使整个页面全屏，使用 document.documentElement.requestFullscreen()或使用跨浏览器功能， globalreqfullscreen.call(document.documentElement)
退出全屏
当元素全屏放置时，默认情况下用户可以选择通过按“ esc ”或“ f11 ” 退出该元素。您也可以根据需要document.exitFullscreen() 和其恶魔般的兄弟姐妹一起做同样的事情：
| document.exitFullscreen（）（标准版） |
| document.webkitExitFullscreen（） |
| document.mozCancelFullScreen（） |
| document.msExitFullscreen（） |
请注意，与requestFullscreen()每个DOM元素上存在的将其输入全屏的exitFullscreen() 方法不同，该方法仅在document对象上定义，以在调用时将元素带回正常空间。
跨浏览器退出功能：与上一节一样， document.exitFullscreen()为方便起见，我们将创建一个返回浏览器支持版本的函数：
1 2 3 4 |
|
示例：在下文中，我们添加到上一个示例，因此双击任何具有CSS类“ canfullscreen”的图像将浏览器返回到正常模式：
1 2 3 4 五 6 7 |
|
检查全屏模式
每当浏览器进入全屏模式时， document.fullscreenElement对象（只读）包含对当前显示的目标元素的引用。null在所有其他情况下，此对象返回。
使用document.fullscreenElement，我们可以：
检查浏览器当前是否处于全屏模式
检查正在显示的元素
document.fullscreenElement 与其他全屏API相关的方法一样，也取决于浏览器：
| document.fullscreenElement（标准版） |
| document.webkitFullscreenElement |
| document.mozFullScreenElement |
| document.msFullscreenElement |
是的，这开始是一个真正的痛苦在后面，但让我们滚动拳。
跨浏览器获取全屏元素功能：使用以下函数返回支持的document.fullscreenElement对象：
1 2 3 4 |
|
下面检查浏览器当前是否为全屏，以及图像是否为正面和中心：
1 2 3 |
|
在全屏模式和常规模式之间切换元素
该document.fullscreenElement对象的常见用途是编写在全屏模式和常规模式之间动态切换元素的代码。
示例：为了说明，以下使用图像上的单击操作在全屏和常规模式之间切换，具体取决于浏览器当前所处的模式：
1 2 3 4 五 6 7 8 9 10 11 12 13 14 |
|
其他方法和事件处理程序
一些其他对象和事件处理程序完成全屏API。他们是：
document.fullscreenEnabled：Boolean如果页面可用于全屏模式，则返回true。尝试以全屏打开时，<iframe>没有显式allowfullscreen属性集的窗口化插件或元素将失败。该document.onfullscreenerror事件将触发，而不是在那些情况下。document.onfullscreenchange：每当浏览器进入或退出全屏模式时触发的事件处理程序。document.onfullscreenerror：当请求时浏览器无法进入全屏模式时触发的事件处理程序。
是的，此时，必须使用前缀来访问上面列出的所有内容的相应版本。他们来了：
| document.fullscreenEnabled（标准） | document.onfullscreenchange（标准） | document.onfullscreenerror（标准） |
| document.webkitFullscreenEnabled | document.onwebkitfullscreenchange | document.onwebkitfullscreenerror |
| document.mozFullScreenEnabled | document.onmozfullscreenchange | document.onmozfullscreenerror |
| document.msFullscreenEnabled | document.onmsfullscreenchange | document.onmsfullscreenerror |
要创建的跨浏览器版本document.onfullscreenchange和 document.onfullscreenerror，一个简单而优雅的方法是先看看哪个版本的requestFullscreen() 方法浏览器支持，然后将结果映射到我们要使用的事件处理程序的相应版本。
跨浏览器onfullscreenchange事件：这是创建统一document.onfullscreenchange 事件处理程序的一种方法：
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 |
|
当我们打电话时getonfullscreenevt()，我们得到支持的“ onfullscreenchange” 版本，例如“ onwebkitfullscreenchange”。然后，为了利用这个事件字符串，我们将它与document对象，定义事件的对象相关联，并为其分配一个函数：
1 2 3 4 五 |
|
请注意，document.addEventListener()当前使用不适用于“ onfullscreenchange”或“ onwebkitfullscreenchange”事件 - 它们需要直接附加到document对象。
全屏相关的CSS
您可以使用:fullscreen伪选择器及其前缀变体在全屏模式下优化元素的外观：
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 |
|
当目标元素及其子元素的样式需要与普通模式下的默认样式不同时，它们非常有用，例如FIGURE，您希望全屏显示图像的容器：
例：
夏威夷是美国的一个州，是中太平洋的一个孤立的火山群岛。它的岛屿以其崎岖的悬崖，瀑布，热带植物和金色，红色，黑色甚至绿色沙滩的海滩而闻名。-Wikipedia
默认情况下，该图的宽度为300px，子图像跨越整个宽度。但是，在全屏模式下，我们希望数字扩展到100％; 并且所包含的图像高度为90vh（为其下方的标题留下一些空间）。这是完成此任务的CSS：
CSS：
1 2 3 4 五 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 三十 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
|
结论
将某些内容显示为全屏可能只是您需要留下深刻印象并转换访问者的额外“魅力”，例如电子商务网站上的产品图片。使用全屏API，现在有一种方法可以做到这一点。