HTML页面的全屏显示及退出全屏案例

• 进入全屏
  requestFullscreen 接收一个参数 options(可选), options 是一个对象, 但是只有一个字段 navigationUI, 用于控制是否在元素处于全屏模式时显示导航条.
  可选值为 auto, hide, show, 默认值为 auto；当元素不在文档内时, 调用requestFullScreen回失败。

• 退出全屏
  exitFullscreen方法，退出全屏只需要调用 document 对象的 exitFullscreen。 调用这个方法会让文档回退到上一个调用Element.requestFullscreen()方法进入全屏模式之前的状态.
  例如, 上面示例中, 先使整个页面进入全屏, 再点击部分全屏的按钮使 section-full-container 进入全屏. 那么整个时候调用 document.exitFullScreen() 时, 会返回整个页面全屏的状态, 需要再次调用 document.exitFullScreen() 才能完全退出全屏状态

代码案例：

<h3 id="fsb">全屏展示</h3><script>     const html = document.querySelector('html');const fullScreenBtn = document.getElementById('fsb');fullScreenBtn.onclick = () => {// 获取是否全屏状态let full = document.fullscreenElementif (!full) {console.log('全屏');fullScreenBtn.innerText = "退出全屏"// 实现全屏模式document.documentElement.requestFullscreen()} else {console.log('退出');fullScreenBtn.innerText = "全屏展示"// 变为不是全屏模式->退出全屏模式document.exitFullscreen()}} </script>

本文参考于：https://blog.csdn.net/m0_67401746/article/details/123501814