lwbg
lwbg

使用JavaScript全屏API全屏化你的元素

原文链接：Displaying Content in Full Screen using the Fullscreen API**
作者：javascriptkit
译者：lwbg
转载需提前联系译者，未经允许不得转载

在浏览网站的时候，我们有时候需要全屏显示某些内容，比如在你选择图片或者视频时。
这里所说的全屏，是指占用整个用户屏幕而没有任何浏览器甚至后台应用程序的干扰。借用全屏API，只需几行简单的js代码，你就可以聚焦到网站任何值得关注的地方，比如你有一张值得炫耀的海岸美景图，并且刚刚发到你的旅游博客上，这个时候任何人都可以把它放大然后去欣赏了（图片来源：PoxaBay）。

使用JavaScript全屏API全屏化你的元素_第1张图片

全屏打开一个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属性的窗口化插件或