当前位置：首页 > 行业动态 > 正文

f11快捷键js

监听keydown事件，判断event.code为”F11″时触发回调，但部分浏览器限制拦截默认

F11快捷键的作用

F11键在浏览器中主要用于控制全屏模式的切换：

  • 按下F11：进入全屏模式（浏览器菜单栏、工具栏隐藏）。
  • 再次按下F11：退出全屏模式。

JavaScript处理全屏的API

浏览器提供 Fullscreen API 供JavaScript调用,关键方法如下：

f11快捷键js 第1张

方法/属性 说明
element.requestFullscreen() 请求元素进入全屏
document.exitFullscreen() 退出全屏
fullscreenElement 当前全屏的元素（全屏时为<html>）
fullscreenchange 事件 监听全屏状态变化

监听全屏状态变化

通过监听 fullscreenchange 事件,可以检测用户是否通过F11或其他方式切换了全屏状态。

示例代码

// 监听全屏状态变化
document.addEventListener('fullscreenchange', function() {
  if (document.fullscreenElement) {
    console.log('进入全屏模式');
    // 可执行全屏后的自定义逻辑（如隐藏某些元素）
  } else {
    console.log('退出全屏模式');
    // 可执行退出全屏后的自定义逻辑（如恢复布局）
  }
});

兼容性处理

不同浏览器的全屏API可能带有前缀,需通过条件判断兼容：

function isFullscreen() {
  return document.fullscreenElement ||
         document.webkitFullscreenElement ||
         document.mozFullScreenElement ||
         document.msFullscreenElement;
}

相关问题与解答

问题1：如何检测用户是否通过F11进入全屏？

解答：
F11的操作会触发浏览器的全屏模式，但无法直接捕获按键事件，可通过监听 fullscreenchange 事件，并在回调中判断 document.fullscreenElement 是否存在，若存在且全屏元素是 <html>,则说明用户进入了全屏模式。

问题2：如何通过JavaScript主动退出全屏？

解答：
调用 document.exitFullscreen() 方法即可退出全屏，需在全屏状态下执行此方法，否则会抛出错误，建议先检查 document.fullscreenElement 是否存在：

if (document.fullscreenElement) {
  document.exitFullscreen
javascript
0

相关文章