js实现网页全屏

使用 JavaScript 实现网页全屏

方法一：使用 Fullscreen API

现代浏览器支持 Fullscreen API，可以通过 JavaScript 控制元素进入或退出全屏模式。

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

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

// 检测全屏状态变化
document.addEventListener('fullscreenchange', () => {
  console.log('全屏状态变化:', document.fullscreenElement !== null);
});

方法二：通过按钮触发全屏

通常将全屏功能绑定到按钮点击事件上。

<button id="fullscreen-btn">切换全屏</button>
<script>
  const btn = document.getElementById('fullscreen-btn');
  btn.addEventListener('click', () => {
    if (!document.fullscreenElement) {
      enterFullscreen(document.documentElement);
    } else {
      exitFullscreen();
    }
  });
</script>

方法三：全屏样式调整

全屏模式下可能需要调整 CSS 样式以适应屏幕。

:fullscreen {
  background-color: white;
}

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

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

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

注意事项

• 全屏 API 通常需要用户交互（如点击事件）才能触发，不能自动执行。
• 不同浏览器可能需要前缀（如 webkit、ms）。
• 全屏状态下按 ESC 键会退出全屏模式。
• 移动端浏览器对全屏模式的支持可能有限。