如何使用 JavaScript 建立全屏 API？

全屏 API 是一個瀏覽器 API，允許開發者向用戶請求全屏顯示，並在需要時退出全屏。

使用全屏 API 相對簡單。首先，您必須檢查您使用的瀏覽器是否支援全屏 API。您可以透過檢查文件物件上全屏 API 的 enabled 屬性是否存在來實現。

如果瀏覽器不支援全屏 API，您仍然可以透過其他方法（例如開啟一個新的瀏覽器視窗）為使用者提供全屏體驗。

假設瀏覽器支援全屏 API，下一步是建立一個函式，該函式將向用戶請求全屏顯示。此函式必須在使用者發起的事件（例如單擊事件）中呼叫。

語法

if (document.documentElement.requestFullscreen) {
   document.documentElement.requestFullscreen();
}

要以全屏模式開啟頁面，我們使用 requestFullscreen() 方法。

方法

requestFullscreen() 方法用於向用戶請求全屏顯示。此方法可以對任何元素呼叫，但最常對 document 元素呼叫。我們使用document.documentElement訪問整個頁面。然後應用requestFullscreen()方法以全屏模式開啟頁面。

我們建立一個“進入全屏”按鈕，當用戶需要以全屏模式開啟頁面時單擊該按鈕。使用者單擊按鈕後，文件將接收 fullscreenchange 事件。此事件可用於檢測文件何時進入或退出全屏模式。

示例

以全屏模式開啟頁面

在下面的示例中，我們使用 JavaScript 建立了一個全屏 API，該 API 在單擊按鈕時以全屏模式開啟輸出視窗。我們還設計了一個退出按鈕來退出全屏。

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
   <h1>Full Screen API with JavaScript</h1>
   <p>Click on the "Enter Full Screen" button to open in Fullscreen mode</p>
   <button onclick="EnterFullScreen();">
      Enter Full Screen
   </button>
   <button onclick="ExitFullScreen();">Exit Full Screen</button>
   <p>Click on the "Exit Full Screen" button or press "Esc" key to exit fullscreen</p>
   <script>
      function EnterFullScreen() {
         if (document.documentElement.requestFullscreen) {
            document.documentElement.requestFullscreen();
         }
      }
      function ExitFullScreen() {
         if (document.exitFullscreen) {
            document.exitFullscreen();
         }
      }
   </script>
</body>
</html>

示例

以全屏模式開啟影片

在下面的示例中，我們使用 JavaScript 建立了一個全屏 API，用於以全屏模式開啟影片。

<!DOCTYPE html>
<html>
<body>
   <h1>Full Screen API with JavaScript</h1>
   <p>Click on the "Enter Full Screen" button to open video in full screen mode</p>
   <button onclick="EnterFullScreen();">
      Enter Full Screen
   </button>
   <p>Press "Esc" key to exit fullscreen</p>
   <iframe id="myvideo" src="https://www.youtube.com/embed/Q4O6yxUC_8g?enablejsapi=1"></iframe>
   <script>
      var elem = document.getElementById("myvideo");
      function EnterFullScreen() {
         if (elem.requestFullscreen) {
            elem.requestFullscreen();
         }
      }
   </script>
</body>
</html>

瀏覽器相容性

所有主要瀏覽器（包括 Internet Explorer、Firefox、Chrome、Safari 和 Opera）都支援全屏 API。但是，全屏 API 仍然是一個相對較新的 API，因此可能會發生變化。

使用全屏 API 有許多好處。首先，它允許您為使用者提供更沉浸式的體驗。其次，它有助於減少干擾並提高注意力。最後，它可以用來建立獨特的視覺效果。

使用全屏 API 也有一些潛在的缺點。首先，它可能會被廣告商和其他第三方內容提供商濫用。其次，很難設計在全屏和非全屏模式下都能正常工作的使用者介面。最後，一些使用者可能會發現全屏體驗令人迷惑。

全屏 API 是一種強大的工具，可用於建立獨特且身臨其境的 使用者體驗。但是，務必負責任地使用全屏 API，並在將其應用於您自己的 Web 應用程式之前考慮其潛在缺點。

更新於：2022年8月4日

795 次瀏覽

啟動您的職業生涯

透過完成課程獲得認證

開始
廣告
© . All rights reserved.