原文链接：Displaying Content in Full Screen using the Fullscreen API**
作者：javascriptkit
译者：lwbg
转载需提前联系译者，未经允许不得转载
在浏览网站的时候，我们有时候需要全屏显示某些内容，比如在你选择图片或者视频时。
这里所说的全屏，是指占用整个用户屏幕而没有任何浏览器甚至后台应用程序的干扰。借用全屏API，只需几行简单的js代码，你就可以聚焦到网站任何值得关注的地方，比如你有一张值得炫耀的海岸美景图，并且刚刚发到你的旅游博客上，这个时候任何人都可以把它放大然后去欣赏了（图片来源：PoxaBay）。
全屏打开一个Element
全屏API依靠的就是 requestFullscreen()方法，这个方法可以全屏打开任何元素：
var img = document.getElementById('img')
if (img.requestFullscreen) {
img.requestFullscreen
}
全屏API支持IE 11+ 和所有现代的Chrome、Firefox桌面浏览器。需要注意的是，直到撰写本文时，仍然需要使用前缀来访问构成API的相关方法和事件处理程序。对于主要的requestFullscreen方法，我们可以使用下面三个不同的前缀方法去满足不同的浏览器：
| 方法 |
|---|
| requestFullscreen() (标准方法) |
| webkitRequestFullscreen() |
| mozRequestFullScreen() |
| msRequestFullscreen() |
跨浏览器兼容requestFullscreen()方法
跨浏览器兼容方法：让我们创建一个跨浏览器版本支持的 requestFullscreen() ，我们不需要迷失在if / else嵌套的海洋里就可以在页面上的任意元素上使用它：
function getreqfullscreen () {
var root = document.documentElement
return root.requestFullscreen || root.webkitRequestFullscreen || root.mozRequestFullScreen || root.msRequestFullscreen
}
// 用法: getreqfullscreen.call(targetElement)
当我们调用getreqfullscreen()的时候，我们就可以得到一个在浏览器上被支持的requestFullscreen()版本。为了调用实际的方法，我们需要使用call()将该方法绑定到我们被期望全屏元素的上下文当中。
例子:
页面中所有css样式是“canfullscreen”的图片只要点击了就可以被全屏。
var globalreqfullscreen = getreqfullscreen() // 得到支持的版本
document.addEventListener('click', function(e){
var target = e.target
if (target.tagName == "IMG" && target.classList.contains('canfullscreen')){
globalreqfullscreen.call(target)
}
}, false)
是不是很简单！
注意：要在document本身调用requestFullscreen()来让整个页面全屏，我们用：
document.documentElement.requestFullscreen()，或者用跨浏览器方法：globalreqfullscreen.call(document.documentElement)
退出全屏
| 方法 |
|---|
| document.exitFullscreen() (标准方法) |
| document.webkitExitFullscreen() |
| document.mozCancelFullScreen() |
| document.msExitFullscreen() |
当元素全屏的时候，默认情况下用户可以按“esc”或“f11”退出全屏。当然你也可以用document.exitFullscreen()和其他方言方法来达到同样的效果：
| 方法 |
|---|
| document.exitFullscreen() (标准方法) |
| document.webkitExitFullscreen() |
| document.mozCancelFullScreen() |
| document.msExitFullscreen() |
需要注意的是，不同于requestFullscreen()方法，它存在于每一个进入全屏的DOM元素上，所以，exitFullscreen()方法仅在文档对象上定义，这样就能在调用时将元素恢复到正常位置。
跨浏览器exitFullscreen()方法： 像上一节一样，为了方便起见，我们将创建一个返回浏览器支持的document.exitFullscreen()版本
function getexitfullscreen(){
return document.exitFullscreen || document.webkitExitFullscreen || document.mozCancelFullScreen || document.msExitFullscreen
}
// 用法：getexitfullscreen.call(document)
例子： ：下面的例子当中，我们在全屏的图像上双击就可以让浏览器回到正常模式。
var globalexitfullscreen = getexitfullscreen() // 获取支持的版本
document.addEventListener('dblclick', function(e){
var target = e.target
if (target.tagName == "IMG" && target.classList.contains('canfullscreen')){
globalexitfullscreen.call(document)
}
}, false)
检查全屏状态
浏览器在进入全屏模式的时候，document.fullscreenElement对象（只读）包含了对当前显示的目标元素的引用，在一般情况下，此对象返回null。
借用document.fullscreenElement，我们可以：
- 检查浏览器当前是否为全屏模式
- 检查哪个元素被显示
document.fullscreenElement和其他全屏API一样，也依赖一些浏览器前缀方法：
| 方法 |
|---|
| document.fullscreenElement() (标准方法) |
| document.webkitFullscreenElement() |
| document.mozFullScreenElement() |
| document.msFullscreenElement() |
虽然确实很麻烦，但是我们还是应该哈哈一笑从容面对。
跨浏览器getfullscreenelement()方法: 使用下面的方法去兼容document.fullscreenElement对象：
function getfullscreenelement(){
return document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement
}
用法：getfullscreenelement()
下面的代码会检查浏览器当前是否全屏，并且图像处于屏幕中央：
If (getfullscreenelement() && getfullscreenelement().tagName == "IMG"){
console.log("图片全屏了！")
}
在全屏模式和常规模式之间切换
document.fullscreenElement对象的常见用法是编写在全屏模式和常规模式之间动态切换元素的代码。
例子： 为了说明，在下面的图片上进行点击切换全屏和常规模式，具体取决于浏览器当前处于哪种状态。
var globalreqfullscreen = getreqfullscreen()
var globalexitfullscreen = getexitfullscreen()
document.addEventListener('click', function(e){
var target = e.target
if (target.tagName == "IMG" && target.classList.contains('canfullscreen')){
if (getfullscreenelement() == null){ // 非全屏
globalreqfullscreen.call(target)
}
else{
globalexitfullscreen.call(document)
}
}
}, false)
其他的一些方法和事件处理
其他几个对象和事件处理程序构成了全屏API，
包括：
-
document.fullscreenEnabled：如果页面可用于全屏模式，则返回布尔值true。没有设置allowfullscreen属性的窗口化插件或<iframe>元素将不允许全屏，这时会触发document.onfullscreenerror事件 -
document.onfullscreenchange：浏览器全屏或退出触发的事件 -
document.onfullscreenerror：浏览器全屏失败的时候触发的事件
同样的我们也必须使用前缀来访问对应的版本。
要创建document.onfullscreenchange和document.onfullscreenerror的跨浏览器版本，一个简单且优雅的方法是首先查看浏览器支持的requestFullscreen()方法的版本，然后将结果映射到我们希望的事件处理程序的对应版本。
跨浏览器onfullscreenchange事件： 这是创建统一的`document.onfullscreenchange``事件处理程序的一种方法：
function getonfullscreenevt(){
var root = document.documentElement
var fullscreenevts = {
'requestFullscreen': 'onfullscreenchange',
'webkitRequestFullscreen': 'onwebkitfullscreenchange',
'mozRequestFullScreen': 'onmozfullscreenchange',
'msRequestFullscreen': 'onmsfullscreenchange'
}
for (var method in fullscreenevts){
if (root[method]){ // if root document object supports this requestFullscreen method
return fullscreenevts[method] // return corresponding onfullscreenchange event string
}
}
return undefined
}
// 用法：var globalonfullscreenchange = getonfullscreenevt(); document[globalonfullscreenchange] = function(){...}
当我们调用getonfullscreenevt()时，我们得到的onfullscreenchange兼容版本，如onwebkitfullscreenchange。然后，为了利用这个事件字符串，我们将它与document对象（事件在下面定义的对象）相关联，并为其分配一个函数：
var globalonfullscreenchange = getonfullscreenevt()
document[globalonfullscreenchange] = function(){
console.log('You just entered or exited full screen')
}
要注意，使用document.addEventListener()目前不适用于“onfullscreenchange”或“onwebkitfullscreenchange”事件,它们需要直接附加到document对象。
与全屏相关的CSS
你可以使用全屏伪选择器及其前缀变体在全屏模式下调整元素的外观：
:-webkit-full-screen {
/*style for full screen element */
}
:-moz-full-screen {
/*style for full screen element */
}
:-ms-fullscreen {
/*style for full screen element */
}
:fullscreen { /* official selector */
/*style for full screen element */
}
当目标元素及其子元素的样式需要与普通模式中的默认样式不同时，如在图形容器中需要全屏显示图形时，就非常有用了。
例子：
Hawaii, a U.S. state, is an isolated volcanic archipelago in the Central Pacific. Its islands are renowned for their rugged landscapes of cliffs, waterfalls, tropical foliage and beaches with gold, red, black and even green sands. -Wikipedia
默认情况下，该图形的宽度为300px，子图像跨越整个宽度。然而，在全屏模式下，我们希望将图片宽度扩展到100％，包含的图像到90vh的高度（留下一些空白放置标题）。css如下：
<style>
figure{
width: 300px;
background: #eee;
padding: 5px;
cursor: pointer;
}
figure img{
width: 100%;
height: auto;
}
figure:-webkit-full-screen {
width: 100%;
text-align: center;
}
figure:-moz-full-screen {
width: 100%;
text-align: center;
}
figure:-ms-fullscreen {
width: 100%;
text-align: center;
}
figure:fullscreen { /* official selector */
width: 100%;
text-align: center;
}
figure:-webkit-full-screen img{
width: auto;
height: 90vh;
}
figure:-moz-full-screen img{
width: auto;
height: 90vh;
}
figure:-ms-fullscreen img{
width: auto;
height: 90vh;
}
figure:fullscreen img{
width: auto;
height: 90vh;
}
</style>
总结
将某些内容显示为全屏是你给访问者留下深刻印象的一个点，比如在浏览电子商务网站的产品图片时，有了完整的屏幕API，我们就可以实现这个功能了。
