Wepress

Appearance

怎么让页面上的某块区域全屏展示？ ​

参考答案： ​

可以通过 HTML5 提供的 全屏 API，将该区域元素通过 requestFullscreen() 方法切换到全屏模式。

步骤概述 ​

  1. 选择你希望全屏的某块区域（如一个 div）。
  2. 在事件中调用 element.requestFullscreen() 方法进入全屏。
  3. 可以监听全屏状态的变化（如退出全屏时的处理）。

实现示例 ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>特定区域全屏展示</title>
  <style>
    #fullscreenDiv {
      width: 300px;
      height: 200px;
      background-color: lightcoral;
      text-align: center;
      line-height: 200px;
      margin: 50px auto;
      cursor: pointer;
    }
  </style>
</head>
<body>

  <div id="fullscreenDiv">点击全屏</div>

  <script>
    const fullscreenDiv = document.getElementById('fullscreenDiv');

    // 点击该区域进入全屏
    fullscreenDiv.addEventListener('click', function() {
      if (fullscreenDiv.requestFullscreen) {
        fullscreenDiv.requestFullscreen();
      } else if (fullscreenDiv.mozRequestFullScreen) { // Firefox
        fullscreenDiv.mozRequestFullScreen();
      } else if (fullscreenDiv.webkitRequestFullscreen) { // Chrome, Safari and Opera
        fullscreenDiv.webkitRequestFullscreen();
      } else if (fullscreenDiv.msRequestFullscreen) { // IE/Edge
        fullscreenDiv.msRequestFullscreen();
      }
    });

    // 监听全屏状态变化
    document.addEventListener('fullscreenchange', () => {
      if (!document.fullscreenElement) {
        console.log('退出全屏');
      } else {
        console.log('进入全屏');
      }
    });
  </script>

</body>
</html>

代码解析 ​

  1. 指定的区域：页面上有一个 div 元素，#fullscreenDiv，点击它时该 div 进入全屏状态。
  2. 进入全屏：调用 fullscreenDiv.requestFullscreen() 使 div 全屏。
  3. 退出全屏：可以按 Esc 键退出全屏，或者调用 document.exitFullscreen() 方法。
  4. 兼容性处理：由于各浏览器对全屏 API 的支持不同，我们进行了跨浏览器的兼容处理。

监听全屏状态变化 ​

使用 fullscreenchange 事件来监听进入或退出全屏的状态变化，可以在不同状态下执行一些操作（如重新调整布局、隐藏/显示退出全屏按钮等）。

题目要点： ​

通过全屏 API，可以轻松将页面中的某个元素切换为全屏模式。这在需要专注展示某块内容或页面时（如视频播放器、图表、图片查看器等）非常有用。