在前端开发中，全屏展示是一个经常用到的功能，而 screenfull.js 是一个可以实现全屏展示的 JavaScript 库。本文将介绍如何使用 npm 安装和使用 screenfull.js，并提供详细的示例代码。
安装
首先，在命令行中进入项目目录，执行以下命令安装 screenfull.js：
npm install screenfull
使用
安装完成后，在需要使用全屏展示的页面中引入 screenfull.js：
<script src="node_modules/screenfull/dist/screenfull.js"></script>
或者通过 commonjs 或 es6 的方式引入：
// commonjs
const screenfull = require('screenfull');
// es6
import screenfull from 'screenfull';接下来就可以使用 screenfull.js 提供的 API 来实现全屏展示的功能。
API
screenfull.js 提供了以下常用的 API：
screenfull.request()
请求全屏展示。
if (screenfull.isEnabled) {
screenfull.request();
}screenfull.exit()
退出全屏展示。
if (screenfull.isEnabled) {
screenfull.exit();
}screenfull.toggle()
切换全屏展示状态。
if (screenfull.isEnabled) {
screenfull.toggle();
}screenfull.onchange(callback)
当全屏展示状态变化时触发回调函数。
if (screenfull.isEnabled) {
screenfull.onchange(() => {
console.log('全屏展示状态变化');
});
}screenfull.onerror(callback)
当进入全屏展示失败时触发回调函数。
if (screenfull.isEnabled) {
screenfull.onerror(() => {
console.log('进入全屏展示失败');
});
}示例
以下是一个简单的示例，点击按钮可以进入和退出全屏展示：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------- ----------
------- ----------------------------------------------------------
-------
---- -
------- -----
------- --
-------- -----
---------------- -------
------------ -------
---------- -----
-
--------
-------
------
------- ---------------------------------
--------
----- ------------- - ------------------------------------------
-- ---------------------- -
--------------------------------------- -- -- -
--------------------
---
---------------------- -- -
------------------------- - ----------------------- - -------- - -------
---
- ---- -
---------------------- - -----
------------------------- - -------------
-
---------
-------
-------结束语
通过本文的介绍，相信读者已经了解如何使用 screenfull.js 实现全屏展示的功能。在实际开发中，可以根据自己的需求灵活使用 screenfull.js 提供的 API 来实现更多的交互效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/33608