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.fullscreenElement
      if (!full) {
          console.log('全屏');
          fullScreenBtn.innerText = "退出全屏"
          // 实现全屏模式
          document.documentElement.requestFullscreen()
      } else {
          console.log('退出');
          fullScreenBtn.innerText = "全屏展示"
          // 变为不是全屏模式->退出全屏模式
          document.exitFullscreen()
      }
  } 
  script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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