構(gòu)建全屏 Web 應(yīng)用程序

時間：2023-09-11 13:18:01 | 來源：網(wǎng)站運(yùn)營

時間：2023-09-11 13:18:01 來源：網(wǎng)站運(yùn)營

構(gòu)建全屏 Web 應(yīng)用程序：全屏 UI 設(shè)計(jì)有助于通過消除干擾來保持用戶與內(nèi)容的專注互動。因此，可以看到在現(xiàn)代 Web 應(yīng)用程序中越來越多地使用全屏 UI，這都得益于瀏覽器的發(fā)展。在過去Web 應(yīng)用要支持絲滑全屏還是有一定的復(fù)雜度，如借助 Flash 等等。在本文中，通過一個簡單的全屏功能來展示 JavaScript 全屏 API 功能的使用。

什么是全屏 API？

全屏 API 提供了將全屏集成到 DOM 元素及其子元素的方法，開發(fā)人員可以使用此功能向最終用戶輕松的實(shí)現(xiàn)全屏。

如日常生活中騰訊視頻、優(yōu)酷視頻等視頻網(wǎng)站、地圖或WEB游戲等等，全屏模式可提供更好的用戶體驗(yàn)。

注意：瀏覽器對全屏 API 的支持因 Safari 不完全支持此功能而異。但是可以通過使用判斷瀏覽器來兼容解決這個問題。

全屏 API 示例

使用全屏 API 非常簡單，它有一系列現(xiàn)成的全局方法。下面就以創(chuàng)建一個簡單應(yīng)用程序來演示全屏 API 的功能?？梢栽谶@里 multifile-uploader項(xiàng)目中找到完整的代碼。

requestFullscreen

全屏 API 提供了一個名為 requestFullscreen() 的方法來從瀏覽器請求全屏視圖，將返回一個 promise ，該 promise 將在激活全屏模式后完成。

增加全屏按鈕，并綁定一個 click 事件。

let elemBtnFullscreen = document.querySelector(".fullscreen-button");elemBtnFullscreen.addEventListener("click", () => { document.documentElement.requestFullscreen();});也能為頁面上某一個元素使用 requestFullscreen() 函數(shù)，如對按鈕使用全屏，如下：

const elemBtnFullscreen2 = document.querySelector(".fullscreen-upload-button");elemBtnFullscreen2.addEventListener("click", () => { document.querySelector(".upload-btn").requestFullscreen();});

退出全屏

退出全屏很簡單，因?yàn)橛脩艨梢允褂?Esc 鍵或任何其它常規(guī)方法。但是，如果想使用自定義按鈕來實(shí)現(xiàn)它，則可以使用 exitFullscreen() 方法。這是一種文檔范圍的方法，它將當(dāng)前元素從全屏模式切換回窗口模式。

const elemBtnExitscreen = document.querySelector(".exit-button");elemBtnExitscreen.addEventListener("click", () => { document.exitFullscreen();});

全屏切換

有時，與使用多個按鈕相比，可能更喜歡使用單個切換按鈕來啟用和禁用全屏模式。但是，全屏 API 沒有提供任何直接的方法來在窗口視圖和全屏視圖之間切換。

但是，可以使用現(xiàn)有的方法和屬性輕松實(shí)現(xiàn)全屏切換功能。

在這個例子中，將使用以下屬性來檢查瀏覽器是否支持全屏視圖或者應(yīng)用程序是否已經(jīng)處于全屏模式。

• document.fullscreenEnabled ：檢查瀏覽器是否支持全屏并被用戶允許。
• document.fullscreenElement ：將返回全屏視圖中的當(dāng)前元素， 如果我們不在全屏模式下返回 null 。

toggleFullscreen() 函數(shù)的代碼如下：

const toggleFullscreen = () => { if (document.fullscreenEnabled) { if (document.fullscreenElement) { document.exitFullscreen(); } else { document.documentElement.requestFullscreen(); } } else { alert("Fullscreen is not supported!"); }};const elemBtnFullscreen = document.querySelector(".fullscreen-button");elemBtnFullscreen.addEventListener("click", () => { toggleFullscreen();});document.addEventListener("keydown", (e) => { if (e.key === "Enter") { toggleFullscreen(); }});

全屏樣式

可以使用 CSS 偽類為全屏元素添加特定 :fullscreen 樣式，然后，當(dāng)用戶請求全屏視圖時，樣式將應(yīng)用于 UI，更詳細(xì)的介紹可以參閱《WEB 全屏 API 簡介及示例》

結(jié)論

渲染媒體元素時通常使用全屏視圖，但是繼續(xù)前進(jìn)，接下來，可以使用全屏 API 將任何元素帶入全屏視圖體驗(yàn)。

全屏 API 提供了一大堆可以使用的特性，但是，在實(shí)際Web 應(yīng)用中需要考慮瀏覽器的兼容性。如果不想自己處理兼容性問題，可以使用第三方腳本庫（如 react-fullscreen、screenfull.js 和 fscreen）輕松實(shí)現(xiàn)更好的全屏體驗(yàn)。