HTML DOM exitFullscreen() 方法
htmlweb developmentfront end technology更新于 2025/9/24 21:00:17
HTML DOM exitFullscreen() 方法用于获取当前处于全屏模式的元素并退出该模式。如果在尚未处于全屏模式的元素上执行此方法，则不会执行任何操作。
语法
以下是 exitFullscreen() 方法的语法 −
HTMLElementObject.exitFullscreen()
示例
让我们来看一个 exitFullscreen() 方法的示例 −
<!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>
<h1>exitFullscreen() method example</h1>
<img src="EiffelTower.jpg" width="200px" height="200px">
<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 键或点击"普通视图"按钮返回原始屏幕大小 −
在上面的例子中 −
我们创建了两个按钮"全屏视图"和"普通视图"当用户点击时，将分别执行 GoFullScreen() 或 GoNormal() 函数。 −
<button onclick="GoFullscreen();">Fullscreen View</button> <button onclick="GoNormal();">Normal view</button>
GoFullscreen() 函数获取文档根元素，在 HTML 文档中，该元素为 <html> 元素。然后，它通过获取文档的布尔值 requestFullScreen 属性值来检查屏幕是否尚未处于全屏模式。如果屏幕未处于全屏视图，则使用 <html> 元素执行 requestFullScreen() 方法。您也可以使用任何其他元素，它只会为该元素启用全屏 −
function GoFullscreen() {
if (docEle.requestFullscreen)
docEle.requestFullscreen();
}
GoNormal() 函数获取文档的 exitFullScreen 布尔属性值，以检查屏幕是否尚未处于正常视图。如果屏幕尚未处于正常视图，则执行文档的 exitFullScreen() 方法 −
function GoNormal() {
if (document.exitFullscreen)
document.exitFullscreen();
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
