如何在JavaScript的fullscreenchange事件触发前执行函数？

首先明确：没有原生的beforefullscreenchange事件，浏览器标准里并未定义这个事件，无法直接通过document.addEventListener('beforefullscreenchange', handlerFunction)这种方式实现需求。

以下是两种可行的替代方案：

1. 重写全屏相关API方法 #

因为主动触发全屏/退出全屏都是通过element.requestFullscreen()和document.exitFullscreen()这两个API，我们可以重写这些方法，在调用原生逻辑前执行自定义函数。

示例代码：

// 保存原生方法的引用
const originalRequestFullscreen = Element.prototype.requestFullscreen;
const originalExitFullscreen = document.exitFullscreen;

// 重写进入全屏方法
Element.prototype.requestFullscreen = function() {
  // 先执行你需要提前调用的函数
  handlerFunction();
  // 再调用原生的全屏方法
  return originalRequestFullscreen.call(this);
};

// 重写退出全屏方法
document.exitFullscreen = function() {
  handlerFunction();
  return originalExitFullscreen.call(this);
};

注意：这种方法只能覆盖主动通过JS API触发的全屏切换，无法捕获用户通过浏览器快捷键（如F11）或菜单按钮触发的全屏操作。

2. 监听键盘事件覆盖快捷键场景 #

如果需要处理用户按F11这类快捷键触发的全屏，可以监听键盘事件，在触发前执行函数：

示例代码：

document.addEventListener('keydown', (e) => {
  // 判断是否是单独按下F11键
  if (e.key === 'F11' && !e.ctrlKey && !e.altKey && !e.shiftKey) {
    e.preventDefault(); // 可选，阻止浏览器默认的全屏行为
    handlerFunction();
    // 手动控制全屏切换
    if (!document.fullscreenElement) {
      document.documentElement.requestFullscreen();
    } else {
      document.exitFullscreen();
    }
  }
});

局限性：无法覆盖用户通过浏览器菜单点击全屏的场景，且不同浏览器的全屏快捷键可能存在差异。

总结 #

没有能覆盖所有场景的完美原生方案，建议根据你的实际使用场景组合上述方法：优先用重写API的方式覆盖主动调用场景，再结合键盘事件补充快捷键触发的情况。

内容的提问来源于stack exchange，提问作者vanminhquangtri