使用 Fullscreen api 处理页面全屏

HTML 页面的全屏显示

使用 Element.requestFullscreen() 可以使元素进入全屏，该方法是异步方法，返回一个 Promise 对象

整个页面全屏显示

比如我们需要让整个网页全屏显示，只需要用 html 元素调用 requestFullscreen 方法即可。

示例代码：

<html>
  <body>
    <div>
      全屏显示案例
      <button id="full-screen-btn">进入全屏</button>
    </div>
  </body>
  <script>
    const html = document.querySelector('html');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      html.requestFullscreen()
        .then(() => {
          console.log('进入全屏成功')；
        })
        .catch(() => {
          console.log('进入全屏失败')；
        })
    }
  </script>
<html>

参数

requestFullScreen 接收一个参数 options(可选), options 是一个对象, 但是只有一个字段 navigationUI, 用于控制是否在元素处于全屏模式时显示导航条.
可选值为 auto, hide, show, 默认值为 auto.

当元素不在文档内时, 调用requestFullScreen回失败

<html>
  <body>
    <div>
      全屏显示案例
      <button id="full-screen-btn">进入全屏</button>
    </div>
  </body>
  <script>
    const html = document.querySelector('html');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      html.requestFullscreen()
        .then(() => {
          console.log('进入全屏成功')；
        })
        .catch(() => {
          console.log('进入全屏失败')；
        })
    }

    // 不在文档内的内容全屏
    const el = document.createElement('div');
    el.requestFullscreen()
      .then(() => {
        console.log('全屏成功');
      })
      .catch(() => {
        console.log('全屏失败');
      });
  </script>
<html>

部分内容进入全屏状态

是部分内容进入全屏和页面全屏是一样的, 只是调用 requestFullScreen 方法的 dom 节点改为相应元素即可.

示例代码：

<html>
  <header>
    <style>
      div {
        padding: 20px;
      }
      #section-full-container {
        background-color: #409EFF;
        color: #fff;
        height: 200px;
      }
    </style>
  </header>
  <body>
    <div>
      全屏显示案例
      <button id="full-screen-btn">进入全屏</button>
    </div>
    <div id="section-full-container">
      部分全屏
      <button id="section-full-screen-btn">进入全屏</button>
    </div>
</body>
<script>
  const html = document.querySelector('html');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      html.requestFullscreen()
        .then(() => {
          console.log('进入全屏成功');
        })
        .catch(() => {
          console.log('进入全屏失败');
        })
    }

    // 部分内容全屏
    const sectionFullContainer = document.getElementById('section-full-container');
    const sectionFullBtn = document.getElementById('section-full-screen-btn');
    sectionFullBtn.onclick = () => {
      sectionFullContainer.requestFullscreen()
      .then(() => {
          console.log('全屏成功');
        })
        .catch(() => {
          console.log('全屏失败');
        });
    }
</script>
</html>

退出全屏

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

示例代码

<html>
  <header>
    <style>
      div {
        padding: 20px;
      }
      #section-full-container {
        background-color: #409EFF;
        color: #fff;
        height: 200px;
      }
    </style>
  </header>
  <body>
    <div>
      全屏显示案例
      <button id="full-screen-btn">进入全屏</button>
      <button id="exit-full-screen-btn">退出全屏</button>
    </div>
    <div id="section-full-container">
      部分全屏
      <button id="section-full-screen-btn">进入全屏</button>
      <button id="section-exit-full-screen-btn">退出全屏</button>
    </div>
</body>
<script>
  const html = document.querySelector('html');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      html.requestFullscreen()
        .then(() => {
          console.log('进入全屏成功');
        })
        .catch(() => {
          console.log('进入全屏失败');
        })
    }
    const sectionFullContainer = document.getElementById('section-full-container');
    const sectionFullBtn = document.getElementById('section-full-screen-btn');
    sectionFullBtn.onclick = () => {
      sectionFullContainer.requestFullscreen()
      .then(() => {
          console.log('全屏成功');
        })
        .catch(() => {
          console.log('全屏失败');
        });
    }
    // 退出全屏
    const exitFullScreenBtn = document.getElementById('exit-full-screen-btn');
    const sectionExitFullScreenBtn = document.getElementById('section-exit-full-screen-btn');
    exitFullScreenBtn.onclick = () => {
      exitFullScreen();
    }
    sectionExitFullScreenBtn.onclick = () => {
      exitFullScreen();
    }
</script>
</html>

注意该方法是 document 对象的而不是对应元素的

事件与属性

当全屏状态改变时, 对应元素会触发 fullscreenchange 事件, 该事件会冒泡, 实际使用可以统一监听 document 对象的 fullscreenchange 事件.
document.fullScreenElement 属性可以访问当前正在全屏的元素节点. 没有页面全屏是返回 null.

示例代码

<html>
  <header>
    <style>
      div {
        padding: 20px;
      }
      #section-full-container {
        background-color: #409EFF;
        color: #fff;
        height: 200px;
      }
    </style>
  </header>
  <body>
    <div>
      全屏显示案例
      <button id="full-screen-btn">进入全屏</button>
      <button id="exit-full-screen-btn">退出全屏</button>
    </div>
    <div id="section-full-container">
      部分全屏
      <button id="section-full-screen-btn">进入全屏</button>
      <button id="section-exit-full-screen-btn">退出全屏</button>
    </div>
</body>
<script>
  const html = document.querySelector('html');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      html.requestFullscreen()
        .then(() => {
          console.log('进入全屏成功');
        })
        .catch(() => {
          console.log('进入全屏失败');
        })
    }
    const sectionFullContainer = document.getElementById('section-full-container');
    const sectionFullBtn = document.getElementById('section-full-screen-btn');
    sectionFullBtn.onclick = () => {
      sectionFullContainer.requestFullscreen()
      .then(() => {
          console.log('全屏成功');
        })
        .catch(() => {
          console.log('全屏失败');
        });
    }
    const exitFullScreenBtn = document.getElementById('exit-full-screen-btn');
    const sectionExitFullScreenBtn = document.getElementById('section-exit-full-screen-btn');
    exitFullScreenBtn.onclick = () => {
      exitFullScreen();
    }
    sectionExitFullScreenBtn.onclick = () => {
      exitFullScreen();
    }

    // 监听事件
    document.onfullscreenchange = () => {
    console.log('全屏状态变更');
    // 访问当前全屏的节点
    console.log('当前全屏节点为: ', document.fullscreenElement);
  }
</script>
</html>

元素的全屏样式

使用伪类 :fullscreen, 可以给元素设置全屏时的属性, 当页面没有进入全屏是不生效, 全屏后才生效.
是当前元素属于全屏元素的时候才生效, 既当前元素为 document.fullScreenElement.
如果是父级或父级以上元素全屏, 该元素的 :fullscreen 样式并不会生效

注意: 该方法属于实验性方法, 有兼容性问题, 不建议实际项目中使用

示例代码

<html>
  <head>
    <style>
      #container {
        background-color: #409EFF;
        color: #fff;
        height: 200;
      }
      /* 进入全屏是使元素变为绿色 */
      #container:fullscreen {
        background-color: #67C23A;
      }
    </style>
  </head>
  <body>
    <div id="container">
      fullscreen 伪类案例
      <button id="full-screen-btn">进入全屏</button>
    </div>
  </body>
  <script>
    const container = document.getElementById('container');
    const fullScreenBtn = document.getElementById('full-screen-btn');
    fullScreenBtn.onclick = () => {
      container.requestFullscreen();
    }
  </script>
<html>

解决兼容性问题

兼容性问题可以参考 MDN 相关说明, 实际使用中可以使用 fullscreen 包进行全屏显示处理.