HTML DOM exitFullscreen()方法

HTML DOM exitFullscreen() method

HTML DOM exitFullscreen()方法用于获取当前处于全屏模式的元素以退出该模式。如果在尚未处于全屏模式的元素上执行，则不会执行任何操作。

句法

以下是exitFullscreen()方法的语法-

1	HTMLElementObject.exitFullscreen()

例

让我们来看一个exitFullscreen()方法的示例-

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!DOCTYPE html>
<html>
<head>
<style>
var docEle = document.documentElement;
function GoNormal() {
if (document.exitFullscreen)
document.exitFullscreen();
}
function GoFullscreen() {
if (docEle.requestFullscreen)
docEle.requestFullscreen();
}
</style>
</head>
<body>
exitFullscreen() method example
<img src="EiffelTower.jpg" width="200px" height="200px">
<p><center>[wp_ad_camp_2]</center></p><p>
The Eiffel Tower was built on 28 January 1887
</p>
<button onclick="GoFullscreen();">Fullscreen View</button>
<button onclick="GoNormal();">Normal view</button>
</body>
</html>

输出量

这将产生以下输出-

点击全屏视图时-

您可以通过按键盘上的Esc键或单击"普通视图"按钮来返回到原始屏幕尺寸-

在上面的示例中-

我们创建了两个按钮" FullScreen View"和" Normal View"，当用户单击它们时，它们将分别执行GoFullScreen()或GoNormal()函数-

1 2	<button onclick="GoFullscreen();">Fullscreen View</button> <button onclick="GoNormal();">Normal view</button>

GoFullscreen()函数获取文档根元素，该元素在HTML文档中为元素。然后，它通过获取文档的boolean requestFullScreen属性值来检查屏幕是否尚未处于全屏模式。如果不是全屏视图，则使用元素执行requestFullScreen()方法。您也可以采用其他任何元素，它将仅对该元素启用全屏显示-

1
2
3
4

function GoFullscreen() {
if (docEle.requestFullscreen)
docEle.requestFullscreen();
}

GoNormal()函数获取文档的exitFullScreen布尔值属性值，以检查屏幕是否不在普通视图中。如果屏幕不在普通视图中，那么它将执行文档的exitFullScreen()方法-

1
2
3
4

function GoNormal() {
if (document.exitFullscreen)
document.exitFullscreen();
}