js实现退出全屏

退出全屏的JavaScript实现方法

在JavaScript中，可以通过document.exitFullscreen()方法退出全屏模式。该方法适用于大多数现代浏览器，但不同浏览器可能存在前缀差异。

标准方法：

if (document.exitFullscreen) {
  document.exitFullscreen();
}

兼容不同浏览器前缀的写法：

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) { /* Safari */
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { /* IE11 */
    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('已退出全屏模式');
  }
}

检查当前全屏状态

可以使用以下属性检查当前是否处于全屏模式：

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

实际应用示例

以下是一个完整的全屏切换示例：

const btn = document.getElementById('fullscreen-toggle');

btn.addEventListener('click', function() {
  if (!document.fullscreenElement && 
      !document.webkitFullscreenElement && 
      !document.mozFullScreenElement && 
      !document.msFullscreenElement) {
    // 进入全屏
    if (document.documentElement.requestFullscreen) {
      document.documentElement.requestFullscreen();
    } else if (document.documentElement.webkitRequestFullscreen) {
      document.documentElement.webkitRequestFullscreen();
    } else if (document.documentElement.mozRequestFullScreen) {
      document.documentElement.mozRequestFullScreen();
    } else if (document.documentElement.msRequestFullscreen) {
      document.documentElement.msRequestFullscreen();
    }
  } else {
    // 退出全屏
    exitFullscreen();
  }
});

function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) {
    document.msExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  }
}

注意事项

全屏API需要用户交互（如点击事件）才能触发，不能自动执行。某些浏览器可能限制全屏功能，特别是在iframe中使用时可能需要添加allowfullscreen属性。