FullScreen API与F11快捷键的相关问题排查与解决

前言

某个项目需要点击全屏按钮将页面中某个容器内的元素进行全屏显示便于用户操作，点击退出全屏时显示原来的页面内容

问题

1：指定元素全屏存在部分元素无法显示

记得之前看 FullScreen 相关API时有印象可以让某一元素直接全屏显示，随即变试了试，发现效果还不错，使用如下：

const targetEle = document.getElementById('fullscreenEle');
targetEle.requestFullscreen();

但是在实际的项目中使用变发现了问题，全屏貌似是将当前全屏的内容放入了一个虚拟的DOM视图中（貌似？没怎么研究原理），使用 F12 检索后发现如下：

全屏元素挂载在了 top-layer DOM树下，这样会导致以下几个问题：

1. 为该元素设置的背景样式会失效，显示为黑色（无法解决）
2. 如果你在该页面中使用了类似于 ANT-Design-Vue 组件库中的 a-tooltip / a-modal 等组件，这些组件默认是挂载在 body 下的，无法显示在该全屏页面中

第二个问题的解决方案也很简单：

1. 将整个document元素作为全屏的元素，然后通过JS去控制哪些元素不显示，哪些元素显示
2. 将所有挂载在 body 元素上的悬浮提示、模态框等使用官方API挂载在需要全屏的元素之内即可

2.使用F11时关闭全屏无法监听按键事件

当用户使用F11的快捷键进入全屏后，再使用快捷键F11或者ESC退出全屏时，会发现并没有触发按键事件。这对于页面需要根据全屏状态显示不同内容的开发者来说是致命的。因为这将导致用户使用按钮进入全屏和使用快捷键进入全屏后页面某些元素的状态同步不正确从而导致一些Bug

查阅资料后发现，这应该是浏览器端做的限制，目的是“为了防止开发者使用JS强制用户不可退出全屏”，我认为这是合理的。

但我们如何达成自己想要的效果呢？很简单，重新实现以下按键F11的全屏功能即可

1. 首先监听按键事件，当监听到用户点击 F11 时执行自定义的全屏逻辑
2. 然后监听全屏事件，当用户使用 ESC 和 F11 退出全屏时，可以通过该事件执行自己的逻辑，恢复某些按钮或元素的状态
3. 组件卸载时取消监听按键事件，防止在其他页面仍然执行了该全屏逻辑

代码实现大致如下：