JavaScript全屏实现

前言

今天在做PC端项目时遇见一个全屏需求，以往没有接触过，便查找资料学习了一下。

API

document.fullscreen

检测当前文档是否处于全屏模式，返回值为布尔类型

document.fullscreenElement

当前激活全屏模式的元素，若被激活则返回该元素，否则返回null

document.fullscreenEnabled

当前文档是否支持全屏，返回一个布尔值

requestFullscreen & exitFullscreen

let element = document.documentElement;
// 判断是否已经是全屏
// 如果是全屏，退出
if (document.fullscreen) {
    if (document.exitFullscreen) {
      document.exitFullscreen();
    } else if (document.webkitCancelFullScreen) {
      document.webkitCancelFullScreen();
    } else if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
    } else if (document.msExitFullscreen) {
      document.msExitFullscreen();
    }
    console.log("已退出全屏！");
  } else {
    // 否则，进入全屏
    if (element.requestFullscreen) {
      element.requestFullscreen();
    } else if (element.webkitRequestFullScreen) {
      element.webkitRequestFullScreen();
    } else if (element.mozRequestFullScreen) {
      element.mozRequestFullScreen();
    } else if (element.msRequestFullscreen) {
      // IE11
      element.msRequestFullscreen();
    }
    console.log("已进入全屏！");
 }

注意：exitFullscreen方法只存在于document对象上，而requestFullscreen可指定进入全屏的元素

事件

onfullscreenchange

全屏模式状态发生改变时触发

onfullscreenerror

在不支持全屏模式的元素上请求全屏时触发

兼容处理

所有的浏览器都实现了这些API。然而一些带有前缀的实现在拼写上略微有些差别
建议使用screenfull来实现全屏，它已经为我们消除了浏览器实现上的差异

最后

希望能帮到有需要的人😬