前端基础

15 10月

构建全屏 Web 应用程序

2021-10-15 前端基础

构建全屏 Web 应用程序

全屏 UI 设计有助于通过消除干扰来保持用户与内容的专注互动。因此，可以看到在现代 Web 应用程序中越来越多地使用全屏 UI，这都得益于浏览器的发展。在过去Web 应用要支持丝滑全屏还是有一定的复杂度，如借助 Flash 等等。在本文中，通过一个简单的全屏功能来展示 JavaScript 全屏 API 功能的使用。

什么是全屏 API？

全屏 API 提供了将全屏集成到 DOM 元素及其子元素的方法，开发人员可以使用此功能向最终用户轻松的实现全屏。

如日常生活中腾讯视频、优酷视频等视频网站、地图或WEB游戏等等，全屏模式可提供更好的用户体验。

注意：浏览器对全屏 API 的支持因 Safari 不完全支持此功能而异。但是可以通过使用判断浏览器来兼容解决这个问题。

全屏 API 示例

使用全屏 API 非常简单，它有一系列现成的全局方法。下面就以创建一个简单应用程序来演示全屏 API 的功能。可以在这里 multifile-uploader 项目中找到完整的代码。

requestFullscreen

全屏 API 提供了一个名为 requestFullscreen() 的方法来从浏览器请求全屏视图，将返回一个 promise ，该 promise 将在激活全屏模式后完成。

增加全屏按钮，并绑定一个 click 事件。

let elemBtnFullscreen = document.querySelector(".fullscreen-button");
elemBtnFullscreen.addEventListener("click", () => {
    document.documentElement.requestFullscreen();
});

也能为页面上某一个元素使用 requestFullscreen() 函数，如对按钮使用全屏，如下：

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

退出全屏

退出全屏很简单，因为用户可以使用 Esc 键或任何其它常规方法。但是，如果想使用自定义按钮来实现它，则可以使用 exitFullscreen() 方法。这是一种文档范围的方法，它将当前元素从全屏模式切换回窗口模式。

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

全屏切换

有时，与使用多个按钮相比，可能更喜欢使用单个切换按钮来启用和禁用全屏模式。但是，全屏 API 没有提供任何直接的方法来在窗口视图和全屏视图之间切换。

但是，可以使用现有的方法和属性轻松实现全屏切换功能。

在这个例子中，将使用以下属性来检查浏览器是否支持全屏视图或者应用程序是否已经处于全屏模式。

  • document.fullscreenEnabled ：检查浏览器是否支持全屏并被用户允许。
  • document.fullscreenElement ：将返回全屏视图中的当前元素， 如果我们不在全屏模式下返回 null 。

toggleFullscreen() 函数的代码如下：

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 样式，然后，当用户请求全屏视图时，样式将应用于 UI，更详细的介绍可以参阅《WEB 全屏 API 简介及示例》

结论

渲染媒体元素时通常使用全屏视图，但是继续前进，接下来，可以使用全屏 API 将任何元素带入全屏视图体验。

全屏 API 提供了一大堆可以使用的特性，但是，在实际Web 应用中需要考虑浏览器的兼容性。如果不想自己处理兼容性问题，可以使用第三方脚本库（如 react-fullscreen、screenfull.js 和 fscreen）轻松实现更好的全屏体验。

screenfull.jsfscreenreact-fullscreenfullscreen