时间：2023-09-11 13:18:01 | 来源：网站运营
时间：2023-09-11 13:18:01 来源：网站运营
构建全屏 Web 应用程序：全屏 UI 设计有助于通过消除干扰来保持用户与内容的专注互动。因此，可以看到在现代 Web 应用程序中越来越多地使用全屏 UI，这都得益于浏览器的发展。在过去Web 应用要支持丝滑全屏还是有一定的复杂度，如借助 Flash 等等。在本文中，通过一个简单的全屏功能来展示 JavaScript 全屏 API 功能的使用。注意：浏览器对全屏 API 的支持因 Safari 不完全支持此功能而异。但是可以通过使用判断浏览器来兼容解决这个问题。
在线咨询
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();});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(); }});:fullscreen 样式，然后，当用户请求全屏视图时，样式将应用于 UI，更详细的介绍可以参阅《WEB 全屏 API 简介及示例》关键词：程序
