Web全屏模式轻松掌握[局部元素全屏展现]

我第一次对网页全屏模式有概念，是那种网页播放视频的全屏播 放的那种。感受很强，前几个星期有个需求也是关于全屏模式的，接触以后才知道全屏模式并不神秘，是个很容易掌握的技能...

博客、前端积累文档、公众号、GitHub

CodePen Demo

地址：演示、code

进去看看，玩一下，本文将结合这个demo一块儿进行讲解。

全屏功能封装在一个类里面：

我把全屏模式封装在一个类里面，在代码中有详细的注释，若是有须要的话，直接把类拿出来，根据栗子和注释使用便可。

代码在codepen的demo里。

何谓全屏？

MDN介绍：

使用提供的API，让一个元素与其子元素，能够占据整个屏幕，并在此期间，从屏幕上隐藏全部的浏览器用户界面以及其余应用。

chrome下的全屏表现：

1. 全屏会隐藏标签栏,书签栏

2. 若是网页一开始不是所有撑开的形式，全屏下，也会将要全屏的元素充满整个屏幕

3. 能够多层全屏，如栗子中同样，能够先左边全屏，而后红色全屏。

   在这种状况下退出全屏，只会退出红色全屏，退回到左边全屏的形式，因此页面依然是全屏模式。

4. 进入全屏时，有一个默认的提示：'按esc便可退出全屏模式'，以下图显示：

   

5. 当按Esc或调用退出全屏方法，退出全屏。标签栏和书签栏依然是隐藏的，网页上的元素恢复成本来的尺寸。

   要显示书签栏和标签栏，须要刷新一下页面。

---

全屏API：

总共用到6个API：

1. 浏览器是否支持全屏模式：document.fullscreenEnabled
2. 使元素进入全屏模式：Element.requestFullscreen()
3. 退出全屏：document.exitFullscreen()
4. 检查当前是否有节点处于全屏状态：document.fullscreenElement
5. 进入全屏/离开全屏，触发事件：document.fullscreenchange
6. 没法进入全屏时触发: document.fullscreenerror

浏览器前缀：

目前并非全部的浏览器都实现了API的无前缀版本，因此咱们须要针对不一样浏览器，作一下API的兼容:

这是我在demo中作的浏览器兼容：

/** * @description: 是否支持全屏+判断浏览器前缀 * @param {Function} fn 不支持全屏的回调函数 这里设了一个默认值 */
isFullscreen(fn) {
  let fullscreenEnabled;
  // 判断浏览器前缀
  if (document.fullscreenEnabled) {
    fullscreenEnabled = document.fullscreenEnabled;
  } else if (document.webkitFullscreenEnabled) {
    fullscreenEnabled = document.webkitFullscreenEnabled;
    this.prefixName = 'webkit';
  } else if (document.mozFullScreenEnabled) {
    fullscreenEnabled = document.mozFullScreenEnabled;
    this.prefixName = 'moz';
  } else if (document.msFullscreenEnabled) {
    fullscreenEnabled = document.msFullscreenEnabled;
    this.prefixName = 'ms';
  }
  if (!fullscreenEnabled) {
    if (fn !== undefined) fn(); // 执行不支持全屏的回调
    this.isFullscreenData = false;
  }
}
复制代码

我在实例化的时候进行一次判断浏览器是否支持全屏，而后保存浏览器前缀。

推荐这么作，由于若是每一个API都要这样重复的判断浏览器前缀，那也太恶心了！

1. 浏览器是否支持全屏模式：document.fullscreenEnabled

document.fullscreenEnabled属性返回一个布尔值，表示当前文档是否能够切换到全屏状态。

代码在上方浏览器前缀代码中给出了。

若是没有保存浏览器前缀的话，注意作一下不一样浏览器前缀的兼容！下面再也不强调。

2. 使元素进入全屏模式：Element.requestFullscreen()

/** * @description: 将传进来的元素全屏 * @param {String} domName 要全屏的dom名称 */
Fullscreen(domName) {
  const element = document.querySelector(domName); // 获取dom
  const methodName =
    this.prefixName === ''
      ? 'requestFullscreen'
      : `${this.prefixName}RequestFullScreen`; // API前缀
  element[methodName](); // 调用全屏
}
复制代码

这就是咱们实现全屏的API，是否是超简单？

值得注意的是：调用此API并不能保证元素必定可以进入全屏模式

1. MDN：例如<iframe> 元素具备 allowfullscreen 属性，可选择是否将其内容以全屏模式显示

   这种不被容许全屏的元素属于极少数状况，我试过能够将button全屏。

2. 全屏请求必须在事件处理函数(点击事件等)中调用，不然将会被拒绝。

   在demo中有演示,初始化直接全屏，会触发进入全屏失败回调。

3. 退出全屏：document.exitFullscreen()

介绍：

exitFullscreen() {
  const methodName =
    this.prefixName === ''
      ? 'exitFullscreen'
      : `${this.prefixName}ExitFullscreen`; // API 前缀
  document[methodName](); // 调用
}
复制代码

调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式以前的状态。

多层全屏

像demo中，先进入左边全屏，再进入红色全屏，即为：多层全屏的状况(虽然这种状况并很少)。

当出现多层全屏的状况，须要一层层的退出到页面最初始的状况，并非调用一次document.exitFullscreen()就恢复到页面最初始的样子。

4. 检查当前是否有节点处于全屏状态：document.fullscreenElement

fullscreenElement属性返回正处于全屏状态的Element节点，若是当前没有节点处于全屏状态，则返回null

/** * @description: 检测有没有元素处于全屏状态 * @return 布尔值 */
isElementFullScreen() {
  const fullscreenElement =
    document.fullscreenElement ||
    document.msFullscreenElement ||
    document.mozFullScreenElement ||
    document.webkitFullscreenElement; // 有前缀的f是大写，没前缀是小写
  if (fullscreenElement === null) {
    return false; // 当前没有元素在全屏状态
  } else {
    return true; // 有元素在全屏状态
  }
}
复制代码

事实上，还有一个属性document.fullscreen，返回一个布尔值，表示文档是否处于全屏模式。

两个方法效果是同样，但由于IE不支持这个属性，因此这里用的是document.fullscreenElement

5. 进入全屏/离开全屏，触发事件：document.fullscreenchange

当咱们进入全屏和离开全屏的时候，都会触发一个fullscreenchange事件。

MDN注意：此事件不会提供任何信息，代表是进入全屏或退出全屏。

看了很久事件返回的信息，确实找不到一个值，代表这是在进入全屏，或者离开全屏！

能够说至关不人性化了！但咱们能够经过检查当前是否有节点处于全屏状态，判断当前是否处于全屏模式。

/** * @description: 监听进入/离开全屏 * @param {Function} enter 进入全屏的回调 * @param {Function} quit 离开全屏的回调 */
screenChange(enter,quit) {
  if (!this.isFullscreenData) return;
  const methodName = `on${this.prefixName}fullscreenchange`;
  document[methodName] = e => {
    if (this.isElementFullScreen()) {
      enter && enter(e); // 进入全屏回调
    } else {
      quit && quit(e); // 离开全屏的回调
    }
  };
}
复制代码

注意：多层全屏的状况

1. 先进入左边全屏(进入全屏回调)，再进入红色全屏(进入全屏回调)
2. 退出全屏,此时退出红色全屏，左边还是全屏(触发进入全屏回调)
3. 出现这种状况，能够在点击按钮的时候，作一些状态限制。或者根据全屏事件返回的dom信息来进行判断。

6. 没法进入全屏时触发: document.fullscreenerror

进入全屏并不老是成功的，多是技术缘由，也多是用户拒绝，咱们在上文进入全文的APIElement.requestFullscreen()部分讲过了。

好比全屏请求不是在事件处理函数中调用,会在这里拦截到错误

/** * @description: 浏览器没法进入全屏时触发 * @param {Function} enterErrorFn 回调 */
screenError(enterErrorFn) {
  const methodName = `on${this.prefixName}fullscreenerror`;
  document[methodName] = e => {
    enterErrorFn && enterErrorFn(e)
  };
}
复制代码

Css： 全屏模式下的样式

chorme 70 下的默认会为正在全屏的dom添加两个class：稍微看一下

1. 默认设置黑色背景

:not(:root):-webkit-full-screen::backdrop {
  position: fixed;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background: black; // 会将背景设为黑色的 若是你没为你的dom设置背景的话，全屏下会为黑色
}
复制代码

2. 默认样式：

:not(:root):-webkit-full-screen {
  object-fit: contain;
  position: fixed !important;
  top: 0px !important;
  right: 0px !important;
  bottom: 0px !important;
  left: 0px !important;
  box-sizing: border-box !important;
  min-width: 0px !important;
  max-width: none !important;
  min-height: 0px !important;
  max-height: none !important;
  width: 100% !important;
  height: 100% !important;
  transform: none !important;
  margin: 0px !important;
}
复制代码

全屏状态的CSS：

全屏状态下，大多数浏览器的CSS支持:full-screen伪类，只有IE11支持:fullscreen伪类。使用这个伪类，能够对全屏状态设置单独的CSS属性。

如下css摘自阮一峰老师的Fullscreen API：全屏操做

/* 针对dom的全屏设置 */
.div:-webkit-full-screen {
  background: #fff;
}
/* 全屏属性 */
:-webkit-full-screen {}
:-moz-full-screen {}
:-ms-fullscreen {}
/* 全屏伪类 当前chrome:70 不支持 */
:full-screen {
}
:fullscreen {
  /* IE11支持 */
}
复制代码

---

结语

咱们能够把全屏技术应用在H5游戏、信息流网站、视频等地方，下次再有全屏需求时，记住不要慌，回头看看过本文的栗子，把我封装的类拿出来直接用就能够啦！

但愿看完的朋友能够点个喜欢/关注，您的支持是对我最大的鼓励。

博客、前端积累文档、公众号、GitHub

以上2018.12.1

参考资料：

Fullscreen API：全屏操做

MDN