当前位置：首页 > JavaScript

js实现退出全屏

2026-02-03 05:36:10JavaScript

退出全屏的 JavaScript 实现方法

使用 document.exitFullscreen() 方法可以退出全屏模式。该方法适用于现代浏览器，但需注意浏览器兼容性和前缀差异。

if (document.exitFullscreen) {
  document.exitFullscreen();
} else if (document.webkitExitFullscreen) { // Chrome, Safari, Opera
  document.webkitExitFullscreen();
} else if (document.msExitFullscreen) { // IE/Edge
  document.msExitFullscreen();
} else if (document.mozCancelFullScreen) { // Firefox
  document.mozCancelFullScreen();
}

检测全屏状态变化

通过监听 fullscreenchange 事件可以检测全屏状态的变化。不同浏览器可能需要使用带前缀的事件名称。

document.addEventListener('fullscreenchange', handleFullscreenChange);
document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
document.addEventListener('mozfullscreenchange', handleFullscreenChange);
document.addEventListener('MSFullscreenChange', handleFullscreenChange);

function handleFullscreenChange() {
  if (!document.fullscreenElement && 
      !document.webkitFullscreenElement && 
      !document.mozFullScreenElement && 
      !document.msFullscreenElement) {
    console.log('已退出全屏模式');
  }
}

获取当前全屏元素

使用 document.fullscreenElement 或带前缀的属性可以获取当前处于全屏模式的元素。

const fullscreenElement = document.fullscreenElement || 
                         document.webkitFullscreenElement || 
                         document.mozFullScreenElement || 
                         document.msFullscreenElement;

兼容性注意事项

不同浏览器对全屏API的实现存在差异，建议在使用前检查API的可用性。现代浏览器大多已支持标准API，但仍需考虑旧版浏览器的兼容性。

const exitFullscreen = document.exitFullscreen || 
                      document.webkitExitFullscreen || 
                      document.mozCancelFullScreen || 
                      document.msExitFullscreen;

if (exitFullscreen) {
  exitFullscreen.call(document);
} else {
  console.error('当前浏览器不支持全屏API');
}

完整示例代码

以下是一个完整的退出全屏功能的实现示例：

js实现退出全屏

function exitFullScreen() {
  const exitFS = document.exitFullscreen || 
                document.webkitExitFullscreen || 
                document.mozCancelFullScreen || 
                document.msExitFullscreen;

  if (exitFS) {
    exitFS.call(document);
  } else {
    alert('您的浏览器不支持全屏功能');
  }
}

// 绑定按钮点击事件
document.getElementById('exitFullscreenBtn').addEventListener('click', exitFullScreen);