全屏Api

1.requestFullscreen()

作用

用于发出异步请求使元素进入全屏模式。

调用此 API 并不能保证元素一定能够进入全屏模式。如果元素被允许进入全屏幕模式，返回的Promise会 resolve，并且该元素会收到一个fullscreenchange事件，通知它已经进入全屏模式。如果全屏请求被拒绝，返回的 promise 会变成 rejected 并且该元素会收到一个fullscreenerror事件。如果该元素已经从原来的文档中分离，那么该文档将会收到这些事件。

语法

element.requestFullscreen()

案例

<div class="box"></div>
<button class="btn">全屏</button>
<script>
    const box = document.querySelector(".box");
    const btn = document.querySelector(".btn");
    btn.addEventListener("click", () => {
        box.requestFullscreen();
    });
</script>

2.exitFullscreen()

作用

用于让当前文档退出全屏模式

语法

document.exitFullscreen();