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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。