如何使用 JavaScript 模拟 F11 键实现全屏展示

177 阅读1分钟
function toggleFullScreen() {
  var doc = window.document;
  var docEl = doc.documentElement;

  var requestFullScreen = docEl.requestFullscreen || docEl.mozRequestFullScreen || docEl.webkitRequestFullScreen || docEl.msRequestFullscreen;
  var exitFullScreen = doc.exitFullscreen || doc.mozCancelFullScreen || doc.webkitExitFullscreen || doc.msExitFullscreen;

  if (!doc.fullscreenElement && !doc.mozFullScreenElement && !doc.webkitFullscreenElement && !doc.msFullscreenElement) {
    // 如果当前不是全屏状态,则进入全屏
    requestFullScreen.call(docEl);
  } else {
    // 如果当前是全屏状态,则退出全屏
    exitFullScreen.call(doc);
  }
}

// 监听 F11 键按下事件
document.addEventListener('keydown', function (e) {
  if (e.key === 'F11') {
    e.preventDefault(); // 阻止默认行为(防止浏览器全屏)
    toggleFullScreen();
  }
});