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 键或点击“正常视图”按钮来恢复到原始屏幕大小 −

在上述实例中 −

我们创建了两个按钮“全屏视图”和“正常视图”,当用户点击这两个按钮时,它们将分别执行 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();
}

更新于: 19-Aug-2019

34 次浏览

开启你的 职业生涯

通过完成课程来获得认证

开始
广告