浏览器全屏、退出全屏

主要介绍了浏览器全屏的基本方法：是否支持全屏、全屏、退出全屏、获取全屏元素、全屏事件监听、按钮事件监听等等，以及项目中 Ant Design Tooltip 的问题解决，screenfull 库的使用。

1. 基本方法

浏览器全屏API文档：developer.mozilla.org/en-US/docs/…

1.1 是否支持全屏

// 浏览器是否支持全屏功能
const enabledFullscreen = () => {
  return (
    document.fullscreenEnabled ||
    document.mozFullScreenEnabled || // Firefox火狐浏览器
    document.webkitFullscreenEnabled || // Chrome谷歌浏览器, Safari and Opera
    document.msFullscreenEnabled
  ); // IE and Edge浏览器
};

1.2 实现全屏

// 状态管理：是否处于全屏模式
const [isFullScreen, setIsFullScreen] = useState(false);
// 实现全屏，可用于 DOM 元素，使其进入全屏模式
const requestFullscreen = (id: string) => {
  const element = document.getElementById(id);
  if (element) {
    const requestMethod =
      element.requestFullscreen ||
      element.webkitRequestFullscreen ||
      element.mozRequestFullScreen ||
      element.msRequestFullscreen;
    if (requestMethod) {
      requestMethod.call(element);
      // 全局状态控制
      setIsFullscreen(true);
    }
  }
};

1.3 退出全屏

const exitFullscreen = () => {
  const exitMethod =
    document.exitFullscreen ||
    document.webkitExitFullscreen ||
    document.mozCancelFullScreen ||
    document.msExitFullscreen;
  if (exitMethod) {
    exitMethod.call(document);
    // 全局状态控制
    setIsFullScreen(false);
  }
};

1.4 获取全屏元素

// 获取当前处于全屏状态的元素
const getFullscreenElement = () => {
  return (
    document.fullscreenElement ||
    document.webkitFullscreenElement ||
    document.mozFullScreenElement ||
    document.msFullscreenElement
  );
};

1.5 全屏事件监听

fullscreenchange事件：浏览器进入或离开全屏时触发

export default function useFullScreen() {
  const [isFullScreen, setIsFullScreen] = useState(false);

  useEffect(() => {
    const handleFullscreenChange = () => {
      // 控制状态
      setIsFullScreen(!!getFullscreenElement());
    };

    // 监听事件
    document.addEventListener("fullscreenchange", handleFullscreenChange);
    return () => {
      // 注销事件
      document.removeEventListener("fullscreenchange", handleFullscreenChange);
    };
  }, []);

  // 导出方法
  return {
    enabledFullscreen,
    requestFullscreen,
    exitFullscreen,
    getFullscreenElement,
    isFullScreen,
  };
}

具体使用如下所示：

// 导入自定义的 Hook
import useFullScreen from "/useFullScreen";
// 解构参数和方法
const { requestFullscreen, exitFullscreen, isFullScreen } =
  useFullScreen("previewPage");

1.6 按钮事件监听

keydown事件：键盘按钮事件监听

windows 上的 F11 全屏，Mac 上的 Command+Control+F快捷键全屏的原理：隐藏了地址栏，浏览器为了防止有人恶意全屏，所以监听不到 F11的处理，是浏览器禁止的。

const handleKeyDown = (e: any) => {
  if (e.keyCode === 122 || e.key === "F11") {
    // 切换全屏F11(keyCode=122)
    e.preventDefault(); // 阻止默认行为
  } else if (e.key === "Escape") {
    // ESC退出全屏(keyCode=27)
  } else if ((e.metaKey || e.ctrlKey) && e.key === "f") {
    // Command+Control+F快捷键切换全屏
  }
};

useEffect(() => {
  document.addEventListener("keydown", handleKeyDown);
  return () => {
    document.removeEventListener("keydown", handleKeyDown);
  };
}, []);

2. tooltip 渲染问题

问题描述：使用 Ant Design Tooltip 组件时，全屏模式下，显示不了弹框提示信息。

问题分析：经过排查，发现 Tooltip 弹框的 z-index 值很高，配置 z-index 无效；最后发现进行全屏操作时，不是将整个页面全屏处理，而是将部分内容全屏化处理，Tooltip 弹框内容不在部分内容范围内，所以导致无法显示。

问题解决：配置 tooltip 的 getPopupContainer 属性（浮层渲染父节点，默认渲染到 body 上），指定弹框的父级元素，即可解决。

 const getTooltipContainer = (triggerNode: HTMLElement) => {
    // 选择一个合适的父级节点：直接选择了当前元素的父节点
    return triggerNode.parentNode as HTMLElement;
  };

<Tooltip
  // 定义操作显示方式
  trigger={"click"}
  // 自定义父节点
  getPopupContainer={getTooltipContainer}
  title={
    // 可以自定义任何内容
    <>
      <img src={icClose} alt="关闭" />
      <List />
    </>
  }
>
  <div>资源列表</div>
</Tooltip>

3. 全屏样式设置

全屏状态下，可使用 fullscreen 配置样式

:-webkit-full-screen {}
:-moz-full-screen {}
:-ms-fullscreen {}
:full-screen {}
:fullscreen {}
.preview_page:fullscreen {
  background-color: #fff;
}

4. screenfull 库

如果不想重复造轮子的话，可以直接用现成的screenfull

// 1. 安装
// npm install screenfull

// 2. 引入
import screenfull from "screenfull";

// 3. 使用
// 是否支持全屏功能
screenfull.isEnabled;
// 全屏：不传时，默认整个页面全屏；可以传入固定的全屏元素
screenfull.request();
const ele = document.getElementById("previewPage");
screenfull.request(ele);
// 退出全屏
screenfull.exit();
// 获取全屏元素
screenfull.element;
// 监听全屏事件
screenfull.onchange(() => {
  // 获取全屏状态
  console.log("全屏状态改变", screenfull.isFullscreen);
});

参考文档：

• Fullscreen_API
• screenfull