页面指定区域全屏和退出全屏并触发对应事件

1. 前言

页面全屏和退出全屏是我们工作中经常遇到的问题，以前遇到都是直接到网上copy一份直接使用，知道最近遇到一个需要监听全屏后按ESC键退出全屏问题。所以重新梳理了下相关事件做个总结。

2. 需求问题

这次的需求和以往简单的页面全屏有一些区别

1. 以往的需求都是整个页面全屏和退出全屏即当前的可视窗口document文档。但这次是要指定某个区域全屏。
2. 需要判断当前这块区域是否全屏来显示对应的按钮。
3. 通过ESC建退出全屏后，要能及时更新按钮显示或者状态。

3. 问题解决方案

3-1. 页面全屏，退出全屏方法

注意：调用全屏方法的对象可以是任意一个dom元素，我这里的el可以是document，同时也可以是通过document.querySelector获取的任意dom。如果是document，就是当前页面全屏。否则就是获取的指定dom的区域全屏。

操作	浏览器	方法
全屏	---	el.requestFullscreen()
全屏	CHROME	el.webkitRequestFullScreen()
全屏	FIREFOX	el.mozRequestFullScreen()
全屏	IE	el.msRequestFullscreen()
退出全屏	---	document.exitFullscreen()
退出全屏	CHROME	document.webkitCancelFullScreen()
退出全屏	FIREFOX	document.mozCancelFullScreen()
退出全屏	IE	document.msExitFullscreen()

3-2. 监听当前页面全屏，退出全屏事件

浏览器在进入全屏或者退出全屏时会触发对应的方法

浏览器	方法
---	fullscreenchange
CHROME	mozfullscreenchange
FIREFOX	webkitfullscreenchange
IE	msfullscreenchange

3-2. 获取当前页面的全屏相关的对象

这个对象如果为true则表示当前页面处于全屏状态下，反正则不是。

浏览器	对象
---	document.fullscreenElement
CHROME	document.mozFullScreenElement
FIREFOX	document.webkitFullscreenElement
IE	document.msFullScreenElement

4 用法

4-1. 在Vue项目中使用

<div id="app">
  <button v-if="!fullFlag" @click="fullScreen">全屏</button>
  <button v-else @click="exitFullscreen">退出全屏</button>
  <div class="test">我是全屏内容</div>
</div>

export default {
  data() {
    return {
      fullFlag: false
    };
  },
  created() {
    this.$nextTick(() => {
      // 监听当前页面全屏，退出全屏事件
      let fullArray = [
        "fullscreenchange",
        "mozfullscreenchange",
        "webkitfullscreenchange",
        "msfullscreenchange"
      ];
      fullArray.forEach(item => {
        window.addEventListener(item, () => this.fullscreenchange());
      });
    });
  },
  methods: {
    // 全屏
    fullScreen() {
      let el = document.querySelector(".test");
      if (el.requestFullscreen) {
        el.requestFullscreen();
      } else if (el.mozRequestFullScreen) {
        el.mozRequestFullScreen();
      } else if (el.webkitRequestFullScreen) {
        el.webkitRequestFullScreen();
      } else if (el.msRequestFullscreen) {
        el.msRequestFullscreen();
      }
    },
    // 关闭全屏
    exitFullscreen() {
      let de = document;
      if (de.exitFullscreen) {
        de.exitFullscreen();
      } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
      } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
      } else if (de.msExitFullscreen) {
        de.msExitFullscreen();
      }
    },
    // 全屏事件改变
    fullscreenchange() {
      let isFullscreen
        = document.fullscreenElement
        || document.mozFullScreenElement
        || document.webkitFullscreenElement
        || document.msFullScreenElement;
      if (isFullscreen) {
        this.fullFlag = true;
      } else {
        this.fullFlag = false;
      }
    },
  },
}

4-1. 解析

1. 首先要在created时监听对应的事件触发方法fullscreenchange。
2. 在fullscreenchange方法中操作对应的数据fullFlag，而不是在全屏和退出全屏的方法中操作。
   注: 不这样处理的话，如果我们是通过键盘上的ESC而不是点击退出全屏按钮退出全屏的时候，会造成错误。

5. 总结

好了，以上就是我对页面全屏这个需求的全部总结了。如果喜欢，请给我点个赞❤️。