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:例如