HTML DOM exitFullscreen()用法及代码示例

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 键或单击 “Normal view” 按钮返回到原始屏幕大小 -

在上面的例子中 -

我们创建了两个按钮 “FullScreen View” 和 “Normal View”，当用户点击它们时，它们将分别执行 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 boolen 属性值来检查屏幕是否已经不在普通视图中。如果屏幕不在正常视图中，则执行文档的 exitFullScreen() 方法 -

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

相关用法

注：本文由纯净天空筛选整理自AmitDiwan大神的英文原创作品 HTML DOM exitFullscreen() method。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。