js实现全屏

使用 requestFullscreen 方法

通过调用元素的 requestFullscreen 方法实现全屏。该方法兼容现代浏览器，但不同浏览器可能需要带前缀的版本（如 webkitRequestFullscreen）。

const element = document.documentElement; // 全屏整个页面
if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Safari/Chrome旧版
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE/Edge
  element.msRequestFullscreen();
}

监听全屏状态变化

通过 fullscreenchange 事件监听全屏状态变化，注意不同浏览器的前缀差异。

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); // Safari/Chrome旧版
document.addEventListener('msfullscreenchange', handleFullscreenChange); // IE/Edge

function handleFullscreenChange() {
  if (document.fullscreenElement || document.webkitFullscreenElement || document.msFullscreenElement) {
    console.log('已进入全屏');
  } else {
    console.log('已退出全屏');
  }
}

退出全屏

使用 exitFullscreen 方法退出全屏，需注意浏览器兼容性。

if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Safari/Chrome旧版
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
  document.msExitFullscreen();
}

检查当前全屏状态

通过 fullscreenElement 属性判断当前是否有元素处于全屏状态。

const isFullscreen = document.fullscreenElement 
  || document.webkitFullscreenElement 
  || document.msFullscreenElement;
console.log(isFullscreen ? '全屏中' : '未全屏');

全屏按钮示例

结合按钮触发全屏和退出操作，兼容主流浏览器。

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

注意事项

• 用户交互触发：大多数浏览器要求全屏操作必须由用户手势（如点击）触发，否则会报错。
• 样式调整：全屏模式下可通过 CSS :fullscreen 伪类自定义样式。
• 移动端兼容性：部分移动端浏览器可能限制全屏功能，需测试目标平台。

通过以上方法可实现完整的全屏功能，覆盖主流浏览器兼容性需求。