简介
es-fullscreen 是一个可以快速让网页全屏的 JavaScript 库，通过 npm 安装包即可快速使用，是前端开发中常用的一个工具库。
安装
你可以通过 npm 安装 es-fullscreen 包，具体的安装命令如下：
npm install es-fullscreen
安装完成后，你就可以在你的项目代码中引入 es-fullscreen 包，调用相关的 API，从而实现全屏操作。
使用
es-fullscreen 包中有两个主要的 API：requestFullscreen 和 exitFullscreen。前者用于请求进入全屏模式，后者用于退出全屏模式。
进入全屏模式
调用 requestFullscreen 方法，即可将当前的网页全屏。
import esFullScreen from 'es-fullscreen'; esFullScreen.requestFullscreen(document.documentElement);
requestFullscreen 方法接受一个 DOM 元素作为参数，表示将该元素全屏。上面的示例中，我们将整个文档的根节点全屏。
实际开发中，常常需要将某个特定的元素全屏，比如视频播放器或者图片浏览器等。
const elem = document.querySelector('.video-container');
esFullScreen.requestFullscreen(elem);上例中，我们将 video-container 元素全屏。
退出全屏模式
调用 exitFullscreen 方法，即可退出当前的全屏模式。
esFullScreen.exitFullscreen();
检查全屏状态
使用 isFullscreen 方法检查当前网页是否处于全屏状态。
esFullScreen.isFullscreen(); // 返回 true 或者 false
全屏事件监听
es-fullscreen 包提供了两个全屏相关的事件：fullscreenchange 和 fullscreenerror。
fullscreenchange 事件在进入或退出全屏时触发。
document.addEventListener('fullscreenchange', () => {
if (esFullScreen.isFullscreen()) {
console.log('进入全屏');
} else {
console.log('退出全屏');
}
});fullscreenerror 事件在请求进入全屏失败时触发。
elem.addEventListener('fullscreenerror', () => {
console.error('请求全屏失败');
});注意事项
如果你的代码在 iframe 中运行，需要使用父级窗口的 document 对象来请求全屏。
不同浏览器对全屏操作的支持情况不同，需要针对不同的浏览器做出不同的处理。
结语
本文介绍了如何安装和使用 es-fullscreen 包，深入剖析了全屏相关的 API 和事件，并提供了详细的示例代码，希望本文对你学习前端技术有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef742d5403f2923b035b914