HTML5 全屏API讲解

概述

前端工作中，特别是大屏展示需要全屏展示，如果用户不想手动F11让电脑屏幕全屏，那作为开发者如何实现呢？

相关 API 介绍

requestFullscreen 方法

其实 HTML5 为我们提供了requestFullscreen方法，用于使一个元素进入全屏模式，这对于增强用户体验，如统计分析页面需要大屏展示时非常实用。

通常情况下，这个 API 需要在用户交互比（如点击按钮）后才能调用，否则浏览器会报错：Uncaught (in promise) TypeError: Permissions check failed

示例如下：

doms.container
  .requestFullscreen()
  .then(() => {
    console.log("全屏了");
  })
  .catch((err) => {
    console.log(err.message);
  });

若不是在用户交互后才触发全屏，程序会走catch，捕获错误；若成功，则执行then的回调。

exitFullscreen 方法

exitFullscreen方法用于退出全屏模式，通常通过document.exitFullscreen()。

fullscreen 属性

document.fullscreen属性返回当前是否是全屏模式。

fullscreenEnabled属性

一般获取document.fullscreenEnabled的值，用于判断当前浏览器是否支持全屏。

fullscreenElement 属性

document.fullscreenElement属性返回当前全屏的元素或DOM节点，如果不是全屏，则返回null。

onfullscreenchange 方法

onfullscreenchange方法可以用于监听进入全屏和退出全屏，其方法在requestFullscreen或exitFullscreen的then后面执行。

onfullscreenerror 方法

onfullscreenerror方法与onfullscreenchange相应，用于捕获全屏模式进入和退出的错误异常情况。