requestFullscreen()返回的Promise实际工作机制解析

你遇到的问题核心在于requestFullscreen()返回的Promise的resolve时机，和全屏状态下的布局更新并不是同步的：

1. Promise的resolve逻辑：
   当你调用requestFullscreen()，浏览器会先完成权限校验、全屏请求的初始化流程，一旦确认可以进入全屏，就会立即resolve这个Promise——此时document.fullscreenElement已经能正确指向目标元素，但浏览器还没完成窗口尺寸调整、页面布局重绘这些后续操作。

2. 尺寸更新的时机：
   全屏状态下的窗口尺寸变更、页面布局调整属于浏览器的异步渲染任务，会在Promise resolve之后才进入执行队列。而resize事件是在浏览器完成尺寸调整、布局重绘后才触发的，所以此时能拿到正确的window.innerHeight/window.innerWidth。

结合你的代码和输出来看：

document.getElementById('fullScreenButton').addEventListener('click', (event) => {
    if (!document.fullscreenElement) {
        document.getElementById('container').requestFullscreen()
        .then( () => {
            console.log( `element: ${document.fullscreenElement}` );
            console.log( `height in then: ${window.innerHeight}` );
        });
    }
});

window.addEventListener('resize', () => {
    console.log( `height in resize event: ${window.innerHeight}`);
});

输出：

element: [object HTMLDivElement]
height in then: 673
height in resize event: 1080

then回调里打印的原窗口高度，就是因为此时布局更新还没完成；而后续触发的resize事件，是在浏览器完成全屏尺寸调整后才执行，所以能拿到正确的全屏高度。

如果想在Promise之后获取正确的全屏尺寸，除了监听resize事件，还可以：

• 监听fullscreenchange事件：该事件在全屏状态真正切换完成后触发，此时可以获取正确的尺寸
• 使用requestAnimationFrame：把获取尺寸的逻辑放到requestAnimationFrame回调里，它会在浏览器下一次重绘前执行，此时布局更新已经完成

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