当前位置：首页 > JavaScript

js实现网页全屏

2026-03-01 06:09:58JavaScript

实现网页全屏的JavaScript方法

使用JavaScript实现网页全屏功能可以通过Fullscreen API完成。该API提供了进入和退出全屏模式的方法。

进入全屏模式

调用requestFullscreen方法可以让特定元素进入全屏模式。通常应用于整个页面或某个容器元素。

function enterFullscreen(element) {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.webkitRequestFullscreen) { /* Safari */
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { /* IE11 */
    element.msRequestFullscreen();
  }
}

// 全屏整个页面
enterFullscreen(document.documentElement);

// 全屏某个元素
const container = document.getElementById('fullscreen-container');
enterFullscreen(container);

退出全屏模式

使用exitFullscreen方法可以退出全屏模式。

js实现网页全屏

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    document.msExitFullscreen();
  }
}

exitFullscreen();

检测全屏状态

通过document.fullscreenElement可以检测当前是否处于全屏状态。

function isFullscreen() {
  return !!(document.fullscreenElement || 
            document.webkitFullscreenElement || 
            document.msFullscreenElement);
}

if (isFullscreen()) {
  console.log('Currently in fullscreen mode');
}

全屏事件监听

可以监听全屏状态变化事件。

js实现网页全屏

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('msfullscreenchange', handleFullscreenChange);

function handleFullscreenChange() {
  if (isFullscreen()) {
    console.log('Entered fullscreen mode');
  } else {
    console.log('Exited fullscreen mode');
  }
}

样式调整

全屏模式下可能需要调整CSS样式。

:-webkit-full-screen {
  background-color: white;
}

:-moz-full-screen {
  background-color: white;
}

:-ms-fullscreen {
  background-color: white;
}

:fullscreen {
  background-color: white;
}

浏览器兼容性注意事项

不同浏览器可能需要不同的前缀：

标准：requestFullscreen
Safari/Chrome旧版：webkitRequestFullscreen
IE11：msRequestFullscreen

建议在调用API前先检测方法是否存在。

完整示例代码

<!DOCTYPE html>
<html>
<head>
  <style>
    #fullscreen-container {
      width: 100%;
      height: 100vh;
      background-color: #f0f0f0;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    button {
      padding: 10px 20px;
      font-size: 16px;
    }
  </style>
</head>
<body>
  <div id="fullscreen-container">
    <button id="toggle-fullscreen">Toggle Fullscreen</button>
  </div>

  <script>
    const toggleBtn = document.getElementById('toggle-fullscreen');
    const container = document.getElementById('fullscreen-container');

    toggleBtn.addEventListener('click', () => {
      if (!document.fullscreenElement) {
        enterFullscreen(container);
      } else {
        exitFullscreen();
      }
    });

    function enterFullscreen(element) {
      if (element.requestFullscreen) {
        element.requestFullscreen();
      } else if (element.webkitRequestFullscreen) {
        element.webkitRequestFullscreen();
      } else if (element.msRequestFullscreen) {
        element.msRequestFullscreen();
      }
    }

    function exitFullscreen() {
      if (document.exitFullscreen) {
        document.exitFullscreen();
      } else if (document.webkitExitFullscreen) {
        document.webkitExitFullscreen();
      } else if (document.msExitFullscreen) {
        document.msExitFullscreen();
      }
    }

    document.addEventListener('fullscreenchange', handleFullscreenChange);
    document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
    document.addEventListener('msfullscreenchange', handleFullscreenChange);

    function handleFullscreenChange() {
      console.log('Fullscreen state changed');
    }
  </script>
</body>
</html>