当前位置：首页 > JavaScript

js实现网页全屏

2026-01-30 15:06:05JavaScript

使用 JavaScript 实现网页全屏

JavaScript 提供了 Fullscreen API，允许网页内容以全屏模式显示。以下是实现网页全屏的几种方法。

进入全屏模式

调用 requestFullscreen 方法可以让指定元素进入全屏模式。现代浏览器可能带有前缀（如 webkitRequestFullscreen）。

js实现网页全屏

const element = document.documentElement; // 整个页面
if (element.requestFullscreen) {
  element.requestFullscreen();
} else if (element.webkitRequestFullscreen) { // Safari
  element.webkitRequestFullscreen();
} else if (element.msRequestFullscreen) { // IE11
  element.msRequestFullscreen();
}

退出全屏模式

使用 exitFullscreen 方法退出全屏模式。同样需要考虑浏览器前缀。

js实现网页全屏

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

检查全屏状态

通过 document.fullscreenElement 可以检查当前是否有元素处于全屏状态。

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

全屏事件监听

可以监听 fullscreenchange 事件，在全屏状态变化时触发回调。

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

function handleFullscreenChange() {
  console.log('全屏状态变化');
}