Screenfull.js 使用教程
1. 项目的目录结构及介绍
Screenfull.js 是一个简单的 JavaScript 库,用于在跨浏览器环境中使用全屏 API。以下是项目的目录结构:
screenfull/
├── .github/
│ └── FUNDING.yml
├── .editorconfig
├── .gitattributes
├── .gitignore
├── .npmrc
├── .travis.yml
├── index.d.ts
├── index.js
├── license
├── package.json
├── readme.md
└── test/
├── browser.js
├── browser.html
└── index.js
.github/
:包含 GitHub 相关的配置文件,如资金支持配置。.editorconfig
:编辑器配置文件,用于统一代码风格。.gitattributes
:Git 属性配置文件。.gitignore
:Git 忽略文件配置。.npmrc
:NPM 配置文件。.travis.yml
:Travis CI 配置文件。index.d.ts
:TypeScript 类型定义文件。index.js
:主入口文件,包含全屏功能的实现。license
:项目许可证文件。package.json
:NPM 包配置文件,包含项目依赖和脚本。readme.md
:项目说明文档。test/
:测试文件夹,包含浏览器测试和单元测试。
2. 项目的启动文件介绍
Screenfull.js 的启动文件是 index.js
。这个文件导出了一个简单的 API,用于控制全屏功能。以下是 index.js
的主要内容:
'use strict';
const isFullscreen = () => document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement;
const requestFullscreen = element => {
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
};
const exitFullscreen = () => {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
};
const toggleFullscreen = element => {
if (isFullscreen()) {
exitFullscreen();
} else {
requestFullscreen(element);
}
};
module.exports = {
isFullscreen,
requestFullscreen,
exitFullscreen,
toggleFullscreen
};
isFullscreen
:检查当前是否处于全屏状态。requestFullscreen
:请求将指定元素设置为全屏。exitFullscreen
:退出全屏状态。toggleFullscreen
:切换全屏状态。
3. 项目的配置文件介绍
Screenfull.js 的配置文件主要是 package.json
。这个文件包含了项目的元数据、依赖和脚本。以下是 package.json
的主要内容:
{
"name": "screenfull",
"version": "6.0.2",
"description": "Simple wrapper for cross-browser usage of the JavaScript Fullscreen API",
"license": "MIT",
"repository": "sindresorhus/screenfull",
"funding": "https://github.com/sponsors/sindresorhus",
"author": {
"name": "Sindre Sorhus",
"email": "sindresorhus@gmail.com",
"url": "sindresorhus.com"
},
"type": "module",
"exports": "./index.js",
"engines": {
"node": ">=12"
},
"scripts": {
"test": "xo