全屏切换文档提供两种方式： 1、js原生方式 2、插件方式读者可以根据具体的场景去选择使用（文章只做参考）

实现方式

原生js
通过插件

原生（注意浏览器兼容，在此就不在多做描述了）

document.fullscreenEnabled

返回值是布尔值，true 表示全屏可用 false 标识全屏不可用

document.body.requestFullscreen()

开启全屏，只能被动触发（用户操作）

    const btn = document.querySelector("#btn");
    if (document.fullscreenEnabled) {
      // 判断全屏是否可用
      btn.addEventListener("click", function () {
        document.body.requestFullscreen();
      });
    }

可以多个元素同时全屏，并把所有的全屏元素都存放在一个栈中

document.exitFullscreen()

关闭全屏。

因为可以多个元素同时全屏，该方法只能关闭全屏栈栈内的第一个元素，并让顺位元素进入全屏状态（一次只能关闭一个全屏元素）
```
document.exitFullscreen();
```

监听全屏模式变化 fullscreenchange

可以监听到全屏是否在全屏模式下或者非全屏模式下

    let isFullElement = false;  //是否有全屏元素

    const handle = () => {
      console.log(document.fullscreenElement, "全屏元素");
      isFullElement = document.fullscreenElement != null;
      if (!isFullElement) {
          // 在退出全屏的时候移除监听，否则打开一个全屏元素就会增加一个监听事件
        document.removeEventListener("fullscreenchange", handle);
      }
    };

    document.addEventListener("fullscreenchange", handle);

    console.log(isFullElement, "是否有全屏元素");

fullscreenElement 全屏元素

document.fullscreenElement 


// 假设 body元素在全屏状态下，执行 document.fullscreenElement 
let el = document.fullscreenElement 
console.log(el) //返回   <body>...</body>

如果有全屏元素则返回 全屏元素，没有全屏元素则返回 null

通过插件

npm install screenfull  --save //下载依赖

import screenfull from 'screenfull' //引入依赖

API

isEnabled 是否被允许进入全屏 == document.fullscreenEnabled
```
screenfull .isEnabled //  true 允许  false 不允许
```

request 进入全屏 == requestFullscreen

screenfull.request()  默认整个页面进入全屏  html

screenfull.request(element,options) //两个参数 element元素   options配置

element 指定进入全屏的元素
options 和原生第二个参数一样详见MDN

exit 退出全屏 == exitFullscreen
```
screenfull.exit()
```

toggle 全屏切换

screenfull.toggle() 

screenfull.toggle(element,options)   // 同 request

element 进入全屏状态的元素

screenfull.element   //  返回值  当前全屏状态下的元素

isFullscreen 屏幕当前的状态（是否在全屏中）

screenfull.isFullscreen  //  true 在全屏状态下 false 不在全屏状态下

注意：全屏只能通过用户主动触发！

更多API请看官方地址（ <https://www.npmjs.com/package/screenfull>）

全屏切换

实现方式

原生（注意浏览器兼容，在此就不在多做描述了）

通过插件

注意 ：全屏只能通过用户主动触发！

注意：全屏只能通过用户主动触发！