有些内容只是全屏显示，例如您网站上的选择图片或视频。当我说全屏时，我的意思是占用整个用户屏幕，没有任何浏览器chrome或甚至后台应用程序妨碍。使用Fullscreen API，只需几行JavaScript代码，您就可以将焦点放在您网站上任何值得信赖的内容上，比如说您对此感到非常自豪并且刚刚发布在您的旅行博客上的壮观海岸照片（照片来源：PixaBay）：


使用JavaScript中的Fullscreen API以全屏显示内容_第1张图片

在全屏幕中打开元素

全屏API的核心是requestFullscreen()方法，可以在文档中的任何元素上调用它以使其成为kaboom：

1

2

3

4

"vertical-align: inherit;">"vertical-align: inherit;">Var featuredimg = document.getElementById（“rockyshot”）"vertical-align: inherit;">"vertical-align: inherit;">

如果（featuredimg.requestFullscreen）{"vertical-align: inherit;">"vertical-align: inherit;">

    featuredimg.requestFullscreen（） "vertical-align: inherit;">"vertical-align: inherit;">

}

IE 11+支持FullScreen API，桌面上支持所有现代版Chrome和Firefox。需要注意的是，在编写本文时，仍然需要使用前缀来访问构成API的相关方法和事件处理程序的受支持版本。requestFullscreen()例如，对于主要方法，存在以下3个附加版本以满足3个主要浏览器：


requestFullscreen（）（标准版）
webkitRequestFullscreen（）
mozRequestFullScreen（）
msRequestFullscreen（）

跨浏览器requestFullscreen（）方法

跨浏览器全屏功能：让我们创建一个跨浏览器版本， requestFullscreen()我们可以在页面上的任何元素上使用，这样我们每次使用它时都不会迷失在if / else语句的海洋中：


1

2

3

4

五

"vertical-align: inherit;">"vertical-align: inherit;">function getreqfullscreen（）{"vertical-align: inherit;">"vertical-align: inherit;">

    var root = document.documentElement"vertical-align: inherit;">"vertical-align: inherit;">

    return root.requestFullscreen || "vertical-align: inherit;">root.webkitRequestFullscreen || "vertical-align: inherit;">root.mozRequestFullScreen || "vertical-align: inherit;">root.msRequestFullscreen"vertical-align: inherit;">"vertical-align: inherit;">

}"vertical-align: inherit;">"vertical-align: inherit;">

// usage：getreqfullscreen（）。call（targetelement）//在targetelement上打开全屏


当我们打电话时getreqfullscreen()，我们会requestFullscreen()在浏览器中获得支持的版本 。然后，为了调用实际方法，我们在它上面调用，通过传入我们使用的元素进行全屏来为方法提供所需的上下文。 call()call()

示例：让我们在CSS类“ canfullscreen” 上获取所有图像，以便在点击时全屏显示（照片来源：PixaBay）：


使用JavaScript中的Fullscreen API以全屏显示内容_第2张图片


1

2

3

4

五

6

7

"vertical-align: inherit;">"vertical-align: inherit;">var globalreqfullscreen = getreqfullscreen（）//得到requestFullscreen（）的支持版本

    document.addEventListener（'click'，function（e）{"vertical-align: inherit;">"vertical-align: inherit;">

    var target = e.target"vertical-align: inherit;">"vertical-align: inherit;">

    if（target.tagName ==“IMG”&& target.classList.contains（'canfullscreen'））{"vertical-align: inherit;">"vertical-align: inherit;">

        globalreqfullscreen.call（目标） "vertical-align: inherit;">"vertical-align: inherit;">

    }"vertical-align: inherit;">"vertical-align: inherit;">

}，false）

易如反掌！

注意：要调用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

"vertical-align: inherit;">"vertical-align: inherit;">function getexitfullscreen（）{"vertical-align: inherit;">"vertical-align: inherit;">

    return document.exitFullscreen || "vertical-align: inherit;">document.webkitExitFullscreen || "vertical-align: inherit;">document.mozCancelFullScreen || "vertical-align: inherit;">document.msExitFullscreen"vertical-align: inherit;">"vertical-align: inherit;">

}"vertical-align: inherit;">"vertical-align: inherit;">

// usage：getexitfullscreen.call（document）//总是将文档传递给它


示例：在下文中，我们添加到上一个示例，因此双击任何具有CSS类“ canfullscreen”的图像将浏览器返回到正常模式：


使用JavaScript中的Fullscreen API以全屏显示内容_第3张图片


1

2

3

4

五

6

7

"vertical-align: inherit;">"vertical-align: inherit;">var globalexitfullscreen = getexitfullscreen（）//获得支持的版本 exitFullscreen()

document.addEventListener（'dblclick'，function（e）{"vertical-align: inherit;">"vertical-align: inherit;">

    var target = e.target"vertical-align: inherit;">"vertical-align: inherit;">

    if（target.tagName ==“IMG”&& target.classList.contains（'canfullscreen'））{"vertical-align: inherit;">"vertical-align: inherit;">

        globalexitfullscreen.call（文件）"vertical-align: inherit;">"vertical-align: inherit;">

    }"vertical-align: inherit;">"vertical-align: inherit;">

}，false）

检查全屏模式

每当浏览器进入全屏模式时， document.fullscreenElement对象（只读）包含对当前显示的目标元素的引用。null在所有其他情况下，此对象返回。

使用document.fullscreenElement，我们可以：

  • 检查浏览器当前是否处于全屏模式

  • 检查正在显示的元素

document.fullscreenElement 与其他全屏API相关的方法一样，也取决于浏览器：


document.fullscreenElement（标准版）
document.webkitFullscreenElement
document.mozFullScreenElement
document.msFullscreenElement

是的，这开始是一个真正的痛苦在后面，但让我们滚动拳。

跨浏览器获取全屏元素功能：使用以下函数返回支持的document.fullscreenElement对象：


1

2

3

4

"vertical-align: inherit;">"vertical-align: inherit;">function getfullscreenelement（）{"vertical-align: inherit;">"vertical-align: inherit;">

    return document.fullscreenElement || "vertical-align: inherit;">document.webkitFullscreenElement || "vertical-align: inherit;">document.mozFullScreenElement || "vertical-align: inherit;">document.msFullscreenElement"vertical-align: inherit;">"vertical-align: inherit;">

}"vertical-align: inherit;">"vertical-align: inherit;">

//用法：getfullscreenelement（）


下面检查浏览器当前是否为全屏，以及图像是否为正面和中心：


1

2

3

"vertical-align: inherit;">"vertical-align: inherit;">if（getfullscreenelement（）&& getfullscreenelement（）。tagName ==“IMG”）{"vertical-align: inherit;">"vertical-align: inherit;">

    console.log（“图像当前全屏显示”）"vertical-align: inherit;">"vertical-align: inherit;">

}

在全屏模式和常规模式之间切换元素

该document.fullscreenElement对象的常见用途是编写在全屏模式和常规模式之间动态切换元素的代码。

示例：为了说明，以下使用图像上的单击操作在全屏和常规模式之间切换，具体取决于浏览器当前所处的模式：


使用JavaScript中的Fullscreen API以全屏显示内容_第4张图片


1

2

3

4

五

6

7

8

9

10

11

12

13

14

"vertical-align: inherit;">"vertical-align: inherit;">var globalreqfullscreen = getreqfullscreen（）//得到requestFullscreen（）的支持版本

var globalexitfullscreen = getexitfullscreen（）//获取document.exitFullscreen（）的受支持版本

"vertical-align: inherit;">"vertical-align: inherit;">

document.addEventListener（'click'，function（e）{"vertical-align: inherit;">"vertical-align: inherit;">

    var target = e.target"vertical-align: inherit;">"vertical-align: inherit;">

    if（target.tagName ==“IMG”&& target.classList.contains（'canfullscreen'））{"vertical-align: inherit;">"vertical-align: inherit;">

        if（getfullscreenelement（）== null）{//如果浏览器当前未全屏显示

            globalreqfullscreen.call（目标）"vertical-align: inherit;">"vertical-align: inherit;">

        }"vertical-align: inherit;">"vertical-align: inherit;">

        其他{"vertical-align: inherit;">"vertical-align: inherit;">

            globalexitfullscreen.call（文件）"vertical-align: inherit;">"vertical-align: inherit;">

        }"vertical-align: inherit;">"vertical-align: inherit;">

    }"vertical-align: inherit;">"vertical-align: inherit;">

}，false）

其他方法和事件处理程序

一些其他对象和事件处理程序完成全屏API。他们是：

  • document.fullscreenEnabled：Boolean如果页面可用于全屏模式，则返回true。尝试以全屏打开时，