js 全屏 监听 esc

// 获取需要全屏的元素
const element = document.getElementById('fullscreenElement');

// 进入全屏的方法
function enterFullscreen() {
  if (element.requestFullscreen) {
    element.requestFullscreen();
  } else if (element.mozRequestFullScreen) { // Firefox
    element.mozRequestFullScreen();
  } else if (element.webkitRequestFullscreen) { // Chrome, Safari and Opera
    element.webkitRequestFullscreen();
  } else if (element.msRequestFullscreen) { // IE/Edge
    element.msRequestFullscreen();
  }
}

// 退出全屏的方法
function exitFullscreen() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.mozCancelFullScreen) { // Firefox
    document.mozCancelFullScreen();
  } else if (document.webkitExitFullscreen) { // Chrome, Safari and Opera
    document.webkitExitFullscreen();
  } else if (document.msExitFullscreen) { // IE/Edge
    document.msExitFullscreen();
  }
}

// 监听esc键退出全屏
document.addEventListener('keydown', function(event) {
  if (event.key === 'Escape') {
    exitFullscreen();
  }
});

// 示例按钮触发进入全屏
document.getElementById('enterFullscreenBtn').addEventListener('click', enterFullscreen);