项目背景

• 数据展板
• 点击 全屏展示 按钮后，页面中的部分区域全屏展示
• 全屏模式下展示内容样式和非全屏模式下展示内容样式完全不同

个人难点

• 项目基于微前端，让页面中部分内容全屏展示这一需求如何实现并不了解
• 如何监听全屏状态下的 Esc 和 F11

解决思路

首先，点击 查看大屏 功能比较好实现，网上冲浪找到了让页面中部分内容全屏展示的方法。代码如下：

handleFullScreen () {  // 全屏方法
      let isFullscreen = document.fullScreenElement || document.msFullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement || false;
      if (!isFullscreen) {
        this.isFull = true
        let fullScreenElem = document.getElementById('fullScreenElem')
        if (fullScreenElem.requestFullscreen) {
          fullScreenElem.requestFullscreen();
        } else if (fullScreenElem.mozRequestFullScreen) {
          fullScreenElem.mozRequestFullScreen();
        } else if (fullScreenElem.webkitRequestFullscreen) {
          fullScreenElem.webkitRequestFullscreen();
        } else if (fullScreenElem.msRequestFullscreen) {
          el = document.body;
          fullScreenElem.msRequestFullscreen();
        }
      }
    },

大致就是点击按钮后先查看页面是否处于全屏模式。若当前就是全屏模式，将 isFull 置为 true，然后根据浏览器的不同实现对应的全屏方法。其中比较重要的是 document.getElementById(idName) 中获取的是哪个 DOM，那么就将其内容全屏展示。

那么全屏展示页面部分内容解决了，下一步就是退出全屏，展示原来内容。

由于个人能力问题，全屏模式和非全屏模式展示差异我是写了两个组件，根据 isFull 的值判断展示哪一块，而非一个组件自适应。

根据以上情况，对于退出全屏我个人的思路是 监听 Esc 和 F11，当用户按了这两个键之后，将 isFull 置为 false，以此实现全屏展示和退出全屏的功能。

思路我个人是觉得没啥大问题，但是实现的时候发现了不对劲。

首先是不知道为啥全屏模式下按 Esc 键监听的方法根本没有被调用。其次是全屏模式下，鼠标移动到页面顶部会出现一个半透明小叉作为退出按钮。最后是我发现全屏模式下，鼠标右击页面会出现 退出全屏模式 Esc 的提示字样(应该就是和直接按Esc一个效果)。

发现这些问题之后，我第一个想法是在全屏模式的页面加一个退出按钮，点击退出按钮调用我自己写的退出全屏模式方法，以此来实现这个需求。和产品沟通被反驳后，只能继续网上冲浪，看看有没有啥好的解决办法。

在快下班的时候，突然看到一个帖子，是监听页面进入和退出全屏模式的。大概过了一下内容发现非常符合我当下的情况，代码如下：

mounted () {
    window.addEventListener('fullscreenchange', () => {
      this.showFullModel++
      if (this.isFull && (this.showFullModel % 2 == 0)) {
        this.handleExitFull()
      }
    })
}

这段内容看起来很简单，就是 window 添加一个 fullscreenchange 的监听事件(fullscreenchange在页面进入或退出全屏时触发)。而退出全屏都是在进入全屏后才能实现，所以加个计数的，每次监听到 fullscreenchange 事件就加1，而这个值对2取模时0的话说明当前用户是要退出全屏的。所以就判断一下当前是否在全屏模式下，并且用户是否时要退出全屏，如果是就调用退出全屏方法。

这个方法直接就解决了 Esc、F11 和上面提到的鼠标右击页面提示 退出全屏模式 的问题，很舒服。

总结一下这个功能的实现的过程就是经验不足，很多 Web API 不了解导致功能无法实现。如果了解的多一点可能花费的事件能砍去一大半。

以上。