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