Screenfull.js 使用教程

2026-01-16 09:21:45作者：余洋婵Anita

Simple wrapper for cross-browser usage of the JavaScript Fullscreen API

项目地址：https://gitcode.com/gh_mirrors/sc/screenfull

项目介绍

Screenfull.js 是一个简单封装，用于跨浏览器使用 JavaScript Fullscreen API 的库。它允许你将页面或任何元素带入全屏模式。Screenfull.js 由 Sindre Sorhus 开发，是一个轻量级的工具，适用于需要在不同浏览器中实现全屏功能的开发者。

项目快速启动

安装

你可以通过 npm 安装 Screenfull.js：

npm install screenfull

或者直接在 HTML 文件中引入：

<script src="https://cdn.jsdelivr.net/npm/screenfull@6.0.2/dist/screenfull.min.js"></script>

基本使用

以下是一个简单的示例，展示如何在按钮点击时将一个元素切换到全屏模式：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Screenfull.js 示例</title>
</head>
<body>
    <div id="fullscreen-element">
        点击按钮进入全屏模式
    </div>
    <button id="toggle-fullscreen">切换全屏</button>

    <script src="https://cdn.jsdelivr.net/npm/screenfull@6.0.2/dist/screenfull.min.js"></script>
    <script>
        document.getElementById('toggle-fullscreen').addEventListener('click', () => {
            if (screenfull.isEnabled) {
                screenfull.toggle(document.getElementById('fullscreen-element'));
            }
        });
    </script>
</body>
</html>

应用案例和最佳实践

应用案例

视频播放器：在视频播放器中，用户可能希望全屏观看视频，Screenfull.js 可以轻松实现这一功能。
图片展示：在图片库应用中，用户可能希望全屏查看图片，提升用户体验。
文档阅读器：在文档阅读器中，用户可能希望全屏阅读文档，减少干扰。

最佳实践

检查支持性：在使用 Screenfull.js 之前，始终检查 screenfull.isEnabled，以确保浏览器支持全屏 API。
错误处理：在全屏操作失败时，提供用户友好的错误提示，例如浏览器不支持或用户拒绝了全屏请求。
用户体验：在全屏模式下，确保用户可以轻松退出全屏，例如通过按下 ESC 键或提供一个退出全屏的按钮。

典型生态项目

Screenfull.js 作为一个基础工具库，可以与其他项目结合使用，提升用户体验。以下是一些典型的生态项目：

Video.js：一个开源的 HTML5 视频播放器，可以结合 Screenfull.js 实现全屏播放功能。
PhotoSwipe：一个 JavaScript 图片库，可以结合 Screenfull.js 实现图片的全屏展示。
PDF.js：一个开源的 PDF 阅读器，可以结合 Screenfull.js 实现 PDF 文档的全屏阅读。

通过结合这些项目，可以为用户提供更加丰富和便捷的全屏体验。

Simple wrapper for cross-browser usage of the JavaScript Fullscreen API

项目地址：https://gitcode.com/gh_mirrors/sc/screenfull

登录后查看全文

热门内容推荐

1 【亲测免费】开源项目 `build-your-own-x` 使用指南 2 【亲测免费】探索科技之旅：《Build Your Own X》项目详解 3 GitHub_Trending/bu/build-your-own-x自动化：CI/CD流程在自制项目中的应用 4 从零打造智能家居系统：用build-your-own-x实现家庭自动化

项目优选

收起

deepin linux kernel

OpenHarmony documentation | OpenHarmony开发者文档

Ascend Extension for PyTorch

本项目是CANN提供的数学类基础计算算子库，实现网络在NPU上加速计算。

flutter_flutter

openEuler内核是openEuler操作系统的核心，既是系统性能与稳定性的基石，也是连接处理器、设备与服务的桥梁。

昇腾LLM分布式训练框架

Nop Platform 2.0是基于可逆计算理论实现的采用面向语言编程范式的新一代低代码开发平台，包含基于全新原理从零开始研发的GraphQL引擎、ORM引擎、工作流引擎、报表引擎、规则引擎、批处理引引擎等完整设计。nop-entropy是它的后端部分，采用java语言实现，可选择集成Spring框架或者Quarkus框架。中小企业可以免费商用

🔥LeetCode solutions in any programming language | 多种编程语言实现 LeetCode、《剑指 Offer（第 2 版）》、《程序员面试金典（第 6 版）》题解

🎉 (RuoYi)官方仓库基于SpringBoot，Spring Security，JWT，Vue3 & Vite、Element Plus 的前后端分离权限管理系统