js实现全屏

实现全屏的基本方法

使用JavaScript实现全屏功能主要依赖Element.requestFullscreen()方法。现代浏览器均支持此API，但不同浏览器可能需要添加前缀。

// 触发全屏
function openFullscreen() {
  const elem = document.documentElement; // 获取整个文档元素
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
}

退出全屏模式

通过document.exitFullscreen()方法可退出全屏状态，同样需要考虑浏览器兼容性。

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

检测全屏状态变化

通过监听fullscreenchange事件可以检测全屏状态的切换。不同浏览器的事件名称可能不同。

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange); /* Safari */
document.addEventListener('msfullscreenchange', handleFullscreenChange); /* IE11 */

function handleFullscreenChange() {
  const isFullscreen = document.fullscreenElement || 
                      document.webkitFullscreenElement || 
                      document.msFullscreenElement;
  console.log(isFullscreen ? '进入全屏' : '退出全屏');
}

针对特定元素全屏

默认会对整个页面全屏，若需指定某个元素（如视频或div容器），只需将目标元素传递给API。

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

// 示例：对ID为"video"的元素全屏
const videoElement = document.getElementById('video');
openElementFullscreen(videoElement);

浏览器兼容性提示

虽然现代浏览器普遍支持全屏API，但需注意：

• 全屏请求必须由用户交互（如点击事件）触发，不能自动执行。
• 部分移动端浏览器可能限制全屏功能。
• 前缀差异需处理（如webkit、ms）。

样式调整建议

全屏模式下，CSS可通过:fullscreen伪类定制样式：

:fullscreen {
  background-color: #000;
}
:-webkit-full-screen {
  background-color: #000;
}
:-ms-fullscreen {
  background-color: #000;
}

以上方法覆盖了全屏功能的常见场景，包括触发、退出、状态检测及兼容性处理。