【亲测免费】 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": "[e-mail]",
    "url": "sindresorhus.com"
  },
  "type": "module",
  "exports": "./index.js",
  "engines": {
    "node": ">=12"
  },
  "scripts": {
    "test": "xo