在开发前端页面的过程中，我们可能会用到全屏API来让页面占据整个屏幕，以提升用户体验。然而，全屏API并非所有浏览器都支持，因此我们需要一个 polyfill 来让不支持的浏览器也能使用。这时，可以使用 fullscreen-api-polyfill 包。
什么是 fullscreen-api-polyfill
fullscreen-api-polyfill 是一款 npm 包，旨在让不支持全屏API的浏览器也能使用。它的原理是在不支持 fullScreen API 的浏览器中，使用 element.requestFullscreen() 做替代方案。
安装 fullscreen-api-polyfill
使用 npm 可以轻松安装 fullscreen-api-polyfill。命令如下：
npm install fullscreen-api-polyfill
使用 fullscreen-api-polyfill
使用 fullscreen-api-polyfill 就像使用正常的全屏API一样简单。在需要触发全屏的元素上调用 requestFullscreen() 方法即可。
示例代码
-- -------------------- ---- -------
--------- -----
----- ----------
------
----- ----------------
----------------- --- ----------------
-------
------
---- -----------------
----- ---------- --- -------- ------
------
------- ---------------------------------------------------------------
--------
--- ---- - ---------------------------------------
------------------------------ -------- -- -
--------------- ------------------- --
-------------------------
---
---------
-------
-------在上述示例中，我们在 div 标签上添加了一个点击事件，在点击时调用了 requestFullscreen() 告诉浏览器需要将此元素全屏。
注意事项
- 由于 polyfill 是基于 element.requestFullscreen() 实现的，因此该方法必须在事件回调函数中调用
- Chrome 浏览器中必须使用 https 协议启动才能访问
总结
fullscreen-api-polyfill 是一款非常好用的 npm 包，它可以让不支持全屏API的浏览器也能使用。使用它，可以让我们更方便、更灵活地实现全屏效果。同时也要注意，该包必须在事件回调函数中调用 requestFullscreen() 方法实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedcb78b5cbfe1ea06125fa