screenfull.js（DOM 全屏展示）

如果项目中使用的是 hooks 推荐使用：ahooks - useFullscreen

screenfull.js

github：https://github.com/sindresorhus/screenfull.js

全屏幕 API（Fullscreen API）是 JavaScript 用来让浏览器支持全屏幕的一种方式，透过 Fullscreen API 我们可以让画面可以一次呈现更多的数据，或是专注在某个影片或图片上面等等，然后目前浏览器的支持程度不一，因此要单纯使用 JavaScript 的 Fullscreen API，会变得复杂许多，而今天要介绍的 screenfull.js，就是用来减少 Fullscreen API 在不同浏览器之间实践差异的 library。

需求

实现F11页面全屏功能。（明明可以按 F11 解决的事，非要求添加一个按钮控制）

Vanilla JavaScript（原生 JS 实现）

我们必须检查目前浏览器是否支持 Fullscreen API，并针对不同浏览器调用不同的方法，这甚至还不够全面，还有更多。

document.fullscreenEnabled =
    document.fullscreenEnabled ||
    document.mozFullScreenEnabled ||
    document.documentElement.webkitRequestFullScreen;
function requestFullscreen(element) {
    if (element.requestFullscreen) {
        element.requestFullscreen();
    } else if (element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if (element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
    }
}
if (document.fullscreenEnabled) {
    requestFullscreen(document.documentElement);
}

使用 screenfull.js

用screenfull.request()调用即可，简洁方便，兼容各个浏览器。

if (screenfull.enabled) {
    screenfull.request();
}

react 中使用

效果

代码

import React, { useState } from 'react';
import screenfull from 'screenfull';
const Index = () => {
  const [screenText, setScreenText] = useState('进入全屏');
  const onScreenfull = async () => {
    if (screenfull.isEnabled) {
      // 全屏状态切换
      await screenfull.toggle();
      // 判断全屏状态
      const isFull = !!(document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement);
      setScreenText(isFull ? '退出全屏' : '进入全屏');
    }
  };
  return (
    <div>
      <h3>全屏测试</h3>
      <button onClick={onScreenfull}>{screenText}</button>
    </div>
  );
};
export default Index;

对某个 element 全屏

如果只需要针对画面上的某个 element 进行全屏显示的话，也很简单，在 screenfull.request() 参数中加入要全屏显示的目标就可以了。

if (screenfull.enabled) {
  screenfull.request(document.getElementById('image'));
}

取消全屏幕显示

基本上浏览器都支持直接按 esc 来取消全屏幕，如果希望在程序中取消，只要调用 screenfull.exit() 即可。

if (screenfull.enabled) {
  screenfull.exit();
}

参考资料

[前端军火库]screenfull.js | 大专栏