在后台系统中有一种常见的功能，点击按钮将整个网页全屏，再点击退出全屏。浏览器提供了2种全屏方式，一种通过API在js中实现，另一种是按`F11`键进入全屏模式。但F11进入的全屏模式优先级更高，无法通过API退出。 # 基本知识 ## 元素全屏 ### 检查可用性为了判断当前浏览器是否支持全屏，可以检查只读属性[document.fullscreenEnabled](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/fullscreenEnabled)是否为`true`。 ### 进入全屏网页全屏可以使用[Element.requestFullscreen()](https://developer.mozilla.org/zh-CN/docs/Web/API/Element/requestFullscreen)函数实现，可以将该元素全屏展示。 *如果是移动端，全屏时会横屏展示。* 由于要将整个网页全屏，所以直接使用根元素： ```js document.documentElement.requestFullscreen() ``` ### 检查状态当调用过`requestFullscreen()`后，只读属性[document.fullscreenElement](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/fullscreenElement)将会等于对应当前全屏化的元素。可以检查`document.fullscreenElement`是否等于`document.documentElement`来判断是否启用了网页全屏状态，避免之后退出其他元素的全屏状态。 ### 退出全屏调用[document.exitFullscreen()](https://developer.mozilla.org/zh-CN/docs/Web/API/Document/exitFullscreen)可以退出最后一个元素的全屏状态。（如果有多个元素申请了全屏，则会退回上一个全屏状态） **此外，按`Esc`、`F11`也会退出全屏** ### 事件在触发全屏或退出全屏时（包括使用Esc、F11键退出），都会发出`fullscreenchange`事件。 ## 浏览器全屏除了通过命令让元素全屏，在浏览器中按`F11`键也会让网页窗口全屏，但要注意的是，通过该方式进入全屏时： * 不会修改`document.fullscreenElement`的值例如没有调用过`requestFullscreen()`，按`F11`全屏后该值仍然是null * 全屏和退出时都不会发出`fullscreenchange`事件 * 在按`F11`进入全屏时，会发出`keydown`事件，而退出全屏时则不会发出该事件 * `F11`可以退出`requestFullscreen()`的全屏状态，但`Esc`、`exitFullscreen()`都不能退出F11的全屏状态 # API全屏与浏览器全屏的冲突在只使用API进入和退出全屏时，状态如下： ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6b1c9d3c15c4ed09c1d6803b5dc11ba~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=701&h=304&s=11409&e=png&b=ffffff) 但先按F11进入全屏后： * 无法得知实际的全屏状态，进而无法显示正确的图标。 * 由于全屏时再次通过`requestFullscreen()`全屏没有区别，也无法通过API退出，导致按钮失去作用。 * 唯一退出全屏的方法就是再次按`F11`。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/4995ce14f69a44ceb34baace451680fa~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=814&h=541&s=21054&e=png&b=ffffff) # 解决方案由于F11会导致全屏按钮失效和状态混乱，解决方案也很简单，禁用原生F11全屏，只用`requestFullscreen()`即可。可以创建一个全屏按钮组件如下： ```vue ```