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》项目详解

最新内容推荐

【亲测免费】 THULAC-Python 安装与使用教程 Gradio 开源项目实战指南推荐开源网络工具：flannel——简单易用的Kubernetes网络解决方案终极指南：如何快速上手Awesome APIs开源项目【亲测免费】猫抓浏览器资源嗅探扩展使用与开发指南【亲测免费】推荐一款Mac上超乎想象的歌词应用: LyricsX 【亲测免费】 Silero VAD 教程 Next.js 国际化插件 `next-i18next` 教程 OUI 开源项目使用教程【亲测免费】 Vue-SimpleMDE 使用教程

项目优选

收起

deepin linux kernel

OpenHarmony documentation | OpenHarmony开发者文档

ohos_react_native

React Native鸿蒙化仓库

flutter_flutter

Ascend Extension for PyTorch

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

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

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

TorchAir 支持用户基于PyTorch框架和torch_npu插件在昇腾NPU上使用图模式进行推理。

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