阅读 588

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来实现全屏,它已经为我们消除了浏览器实现上的差异


最后

希望能帮到有需要的人😬