Firefox中F11触发requestFullscreen二次调用被拒绝问题排查

问题根源 #

Firefox对全屏API的用户事件上下文校验比Chrome/Edge更严格：当通过拦截F11退出全屏后，浏览器的原生事件处理栈会残留状态，导致后续的requestFullscreen调用被判定为不在可信的用户触发事件上下文中，从而抛出权限拒绝错误。

修复方案 #

1. 拆分F11按键的处理逻辑，单独处理进入/退出全屏的分支，确保进入全屏的请求直接在keydown事件回调内执行，不经过间接调用
2. 通过fullscreenchange事件跟踪全屏状态，避免同步逻辑干扰事件上下文
3. 确保页面主体始终获得焦点，避免事件触发异常

完整代码实现 #

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>32:9 半屏暗色遮罩</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            width: 50vw;
            height: 100vh;
            background-color: #000;
            cursor: default;
            overflow: hidden;
        }
        /* 鼠标静止隐藏光标 */
        body.cursor-hidden {
            cursor: none;
        }
    </style>
</head>
<body id="app">
    <script>
        const app = document.getElementById('app');
        let cursorTimer;
        let isFullscreen = false;

        // 鼠标静止隐藏光标
        document.addEventListener('mousemove', () => {
            clearTimeout(cursorTimer);
            app.classList.remove('cursor-hidden');
            cursorTimer = setTimeout(() => {
                app.classList.add('cursor-hidden');
            }, 3000);
        });

        // 全屏状态变更监听
        document.addEventListener('fullscreenchange', () => {
            isFullscreen = !!document.fullscreenElement;
        });

        // 通用全屏切换（供双击、F键调用）
        function toggleFullscreen() {
            if (!isFullscreen) {
                app.requestFullscreen().catch(err => console.error('全屏请求失败:', err));
            } else {
                document.exitFullscreen().catch(err => console.error('退出全屏失败:', err));
            }
        }

        // 双击切换全屏
        app.addEventListener('dblclick', toggleFullscreen);

        // 键盘事件处理
        document.addEventListener('keydown', (e) => {
            // F键切换全屏
            if (e.key === 'F' || e.key === 'f') {
                e.preventDefault();
                toggleFullscreen();
                return;
            }

            // F11键处理（单独逻辑修复Firefox问题）
            if (e.key === 'F11') {
                e.preventDefault();
                if (!isFullscreen) {
                    // 直接在事件回调内发起全屏请求，确保上下文有效
                    app.requestFullscreen().catch(err => console.error('全屏请求失败:', err));
                } else {
                    // 退出全屏，依赖fullscreenchange更新状态
                    document.exitFullscreen().catch(err => console.error('退出全屏失败:', err));
                }
            }
        });

        // 页面加载后自动获取焦点
        window.addEventListener('load', () => {
            app.focus();
        });
    </script>
</body>
</html>

关键修复点说明 #

• F11分支独立处理：不再复用通用的toggleFullscreen，而是直接在keydown回调内执行requestFullscreen，确保Firefox能识别到这是用户直接触发的操作
• 状态跟踪依赖fullscreenchange：避免通过同步逻辑判断全屏状态，而是由浏览器的原生事件更新状态，保证状态的准确性
• 页面焦点初始化：页面加载后让主体元素获取焦点，确保键盘事件能正确触发在页面上

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