教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载本文以 30 seconds of code 仓库中的 JavaScript 代码片段 fullscreen.md 为核心系统讲解如何借助原生 Web APIElement.requestFullscreen()与Document.exitFullscreen()在网页中切换任意元素的全屏显示并深入介绍navigationUI配置项、fullscreenchange/fullscreenerror事件监听、配套的 CSS:fullscreen伪类以及浏览器兼容性注意事项。读完本文你将能封装出一个带完整状态反馈、可复用的全屏切换函数并正确处理 Safari 等浏览器不支持该 API 的场景。一、核心 API进入与退出全屏现代 Web API 赋予了浏览器开发者此前只能通过插件或扩展才能实现的能力全屏 API 正是其中之一。它围绕两个核心方法展开Element.requestFullscreen()将指定元素及其子树渲染为全屏显示进入全屏模式Document.exitFullscreen()退出当前文档的全屏模式恢复页面原有布局。给定一个目标元素即可用 JavaScript 在两种状态间切换document.body.requestFullscreen(); // 将 body 元素全屏显示 document.exitFullscreen(); // 退出全屏模式值得说明的是Element.requestFullscreen()是挂在元素原型上的方法因此页面中任意可见元素div、img、video、iframe等都可以被放入全屏而退出全屏是文档级操作由Document.exitFullscreen()统一处理。仓库中这份片段收录在 browser.yaml 所定义的 JavaScript Browser 集合下与 DOM 查询、遍历、操作类工具函数并列属于浏览器交互类的基础能力。[!CAUTION]该特性被标记为limited availability受限可用性。截至原文档撰写时Safari是主要的例外浏览器尚未支持该 API。同时全屏模式对用户可能具有侵入性请在合适的场景下审慎使用。二、封装可复用的 toggleFullscreen 函数为了让代码可直接复用原片段给出了一个带默认参数的封装函数toggleFullscreen同时支持指定目标元素与导航 UI 行为const toggleFullscreen (mode true, el body, ui auto) mode ? document.querySelector(el).requestFullscreen({ navigationUI: ui }) : document.exitFullscreen(); toggleFullscreen(); // 将 body 元素全屏显示 toggleFullscreen(false); // 退出全屏模式 toggleFullscreen(true, #myElement, hide); // 将 #myElement 全屏显示且不显示导航 UI参数说明参数默认值含义可选值 / 取值建议modetrue是否进入全屏true进入全屏false退出全屏elbody目标元素选择器任意合法的document.querySelector选择器字符串如#myElement、.playeruiautonavigationUI选项auto浏览器自行决定、show显示导航 UI、hide隐藏导航 UInavigationUI 选项深入navigationUI是Element.requestFullscreen()的FullscreenOptions参数之一用于指定浏览器在全屏模式下是否展示导航 UI如地址栏auto由浏览器默认策略决定是默认值show即使进入全屏也保留导航 UI便于用户看到地址栏hide隐藏导航 UI提供更沉浸式的全屏体验。该选项的语义细节可查阅 MDN 的 navigationUI 文档。需要注意的是并非所有浏览器都会遵循navigationUI的设置它更多是一个请求而非强制指令实际表现以各浏览器的实现为准。工程建议在真实项目中document.querySelector(el)可能返回null此时直接调用requestFullscreen()会抛错。建议在使用该封装前先判断元素是否存在并将用户交互点击、键盘事件等作为触发入口——绝大多数浏览器要求全屏请求必须由用户手势发起否则会被拒绝。三、监听全屏状态变化fullscreenchange 与 fullscreenerror全屏状态的每次变更都会在document上触发对应的事件便于你在状态切换时执行附加逻辑fullscreenchange全屏模式发生变化进入或退出时触发fullscreenerror全屏请求被拒绝时触发。document.addEventListener(fullscreenchange, () { console.log(Fullscreen mode changed!); }); toggleFullscreen(); // 将 body 元素全屏显示 // LOGS: Fullscreen mode changed! toggleFullscreen(false); // 退出全屏模式 // LOGS: Fullscreen mode changed!基于这一事件机制你可以实现更精细的状态管理例如在全屏变化时通过document.fullscreenElement判断当前全屏元素动态更新播放器 UI显示/隐藏控制条在全屏被拒绝fullscreenerror时给出用户提示例如请先点击页面后再尝试全屏监听用户按Esc键主动退出的场景同步重置页面内部状态。事件细节fullscreenchange事件既会在document上触发也会以冒泡方式经过发生变化的元素fullscreenerror类似。为保持行为一致建议统一监听document级别的事件。四、配套状态查询fullscreenElement 与 fullscreenEnabled除进入/退出方法外全屏 API 还提供两个只读属性用于状态查询这在 30 seconds of code 仓库的 javascript.yaml 中有对应的 MDN 参考链接维护Document.fullscreenElement返回当前处于全屏模式的元素若未处于全屏状态则返回null。它是判断当前是否有元素全屏、是哪一个元素的标准方式比依赖自身标记位更可靠Document.fullscreenEnabled返回布尔值指示全屏 API 在当前文档中是否可用例如非交互场景下可能为false。if (!document.fullscreenEnabled) { console.warn(Fullscreen API is not supported/enabled in this document.); } const isFullscreen () Boolean(document.fullscreenElement);把这两个属性与前面的事件监听结合就能构成一套完整的查询 切换 反馈闭环进入全屏前先用fullscreenEnabled做能力检测切换后用fullscreenElement与fullscreenchange事件做状态同步。这在视频播放器、幻灯片演示、图片预览等场景中尤其有用。五、全屏模式下的样式定制:fullscreen 伪类全屏不仅仅是一个 JavaScript 概念——当元素进入全屏模式时浏览器会为其应用:fullscreen伪类允许你在不添加任何特殊 class、也不依赖 JavaScript 的情况下定制其全屏外观。仓库中的 CSS 片段 fullscreen.md 专门讲解了这一能力并与本片段互为补充其文末也以 相关 JavaScript 文章 的形式指向本文。.element { /* 默认样式 */ } .element:fullscreen { /* 全屏模式下的样式 */ background: #000; color: #fff; }这种方案尤其适合媒体播放器、幻灯片、图集等全屏视图比常规视图更关注沉浸感的内容。你可以借助它调整字号、背景色乃至整体布局使元素在全屏时更好地适配屏幕而无需在 JavaScript 中频繁切换 class。仓库在 css.yaml 中同样维护了:fullscreen伪类的 MDN 参考链接方便进一步查阅其完整语法与限制。六、浏览器兼容性与使用建议浏览器支持情况原文档通过baseline-support featureIdfullscreen组件在页面上动态渲染该特性的浏览器基线支持状态。该组件由仓库的 baseline-support.mjs 脚本实现——它基于baseline-status库在页面加载完成后注册baseline-support自定义元素并结合 baseline-support.scss 定义其展示样式暗色配色、边框与圆角、全宽布局。就目前状况而言Safari 尚未支持该 API因此在实际项目中使用前先做能力检测如检查Element.prototype.requestFullscreen是否存在或借助document.fullscreenEnabled为不支持的环境提供降级方案例如用固定定位 铺满视口的自定义伪全屏样式或直接隐藏全屏按钮全屏请求必须由用户交互触发否则会被浏览器安全策略拒绝并触发fullscreenerror事件。使用建议清单尊重用户全屏模式具有侵入性仅在用户明确需要沉浸式观看视频、演示、图片预览时使用留意层级冲突同一时刻文档中只有一个元素能处于全屏状态重复请求其他元素会自动切换全屏目标处理异常路径监听fullscreenerror并给出反馈避免用户点击无响应配合样式联动将 JavaScript 切换与 CSS:fullscreen伪类结合实现无缝的视觉过渡。[!NOTE]全屏模式存在诸多使用限制与注意事项如元素层级、安全手势要求、跨域 iframe 限制等。在深入使用前建议查阅 MDN 的 compatible elements 文档 获取完整说明。小结围绕 content/snippets/js/s/fullscreen.md 这份片段我们完整梳理了全屏 API 的进入/退出方法、navigationUI配置、状态事件监听、配套查询属性以及 CSS:fullscreen伪类的协作方式。你可以直接复制上文的核心封装用于自己的项目并记得补上能力检测、用户手势触发与错误反馈就能在主流浏览器中提供稳定、可控的全屏体验。仓库中 javascript.yaml 还维护了Element.requestFullscreen()的 MDN 参考链接供你随时查阅各 API 的最新规范细节。赞分享教程文档【免费下载链接】30-seconds-of-codeCoding articles to level up your development skills项目地址https://gitcode.com/gh_mirrors/30/30-seconds-of-code点击查看免费下载相关推荐30 seconds of code 实战用 JavaScript 创建 HTML 元素的完整指南30 seconds of code 实战用 JavaScript 创建 HTML 元素的完整指南 本文以 30 seconds of code 仓库中的 创教程文档Fleet 设备认证Device Attestation实战指南为 Apple Silicon Mac 的 ADE 注册构建基于硬件根的可信身份Fleet 设备认证Device Attestation实战指南为 Apple Silicon Mac 的 ADE 注册构建基于硬件根的可信身份 Flee教程文档30-seconds-of-css 全屏模式样式实战用 :fullscreen 伪类与 requestFullscreen() 实现元素级全屏预览30 seconds of css 全屏模式样式实战用 :fullscreen 伪类与 requestFullscreen 实现元素级全屏预览 本指南以开源仓前端创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考