如何用JS监听浏览器全屏状态变化（进入全屏/退出全屏）？

Question

如何用JS监听浏览器全屏状态变化（进入全屏/退出全屏）？ 在开发网页应用时，我们常常需要监听用户是否进入了全屏模式或退出了全屏模式。例如，在视频播放器中，我们需要根据全屏状态调整界面布局或功能按钮的显示。那么，如何使用JavaScript来监听这些全屏状态的变化呢？可以通过监听document对象的fullscreenchange事件实现。需要注意的是，不同浏览器对全屏API的支持存在差异，可能需要处理前缀兼容性问题（如mozFullScreenChange、webkitfullscreenchange等）。此外，当检测到全屏状态变化时，如何准确判断当前是进入全屏还是退出全屏状态，也是需要解决的一个常见问题。

Answer 1

1. 初步了解全屏状态监听

在网页应用中，监听全屏状态变化是常见的需求。例如，在视频播放器中，用户进入或退出全屏模式时，界面布局需要动态调整。JavaScript 提供了 `fullscreenchange` 事件来实现这一功能。以下是一个简单的代码示例：

document.addEventListener('fullscreenchange', () => {
    console.log('全屏状态已改变');
});
    

需要注意的是，不同浏览器可能使用不同的事件名称（如 `webkitfullscreenchange` 或 `mozfullscreenchange`），因此需要处理这些兼容性问题。

2. 兼容性处理与跨浏览器支持

不同浏览器对全屏 API 的支持存在差异，开发者需要考虑前缀兼容性问题。以下是处理方法的详细步骤：

1. 检测当前浏览器支持的全屏事件名称。
2. 为每个可能的事件名称绑定监听器。

下面是一段完整的代码示例，展示了如何处理兼容性问题：

const fullScreenChangeEvents = [
    'fullscreenchange',
    'webkitfullscreenchange',
    'mozfullscreenchange',
    'MSFullscreenChange'
];

fullScreenChangeEvents.forEach(event => {
    document.addEventListener(event, handleFullScreenChange);
});

function handleFullScreenChange() {
    if (document.fullscreenElement || document.webkitFullscreenElement || document.mozFullScreenElement || document.msFullscreenElement) {
        console.log('进入了全屏模式');
    } else {
        console.log('退出了全屏模式');
    }
}
    

3. 准确判断全屏状态的变化

当全屏状态发生变化时，如何准确判断当前是进入全屏还是退出全屏？可以通过检查 `document.fullscreenElement` 属性来实现。如果该属性为非空值，则表示当前处于全屏模式；否则表示退出了全屏模式。

属性名	说明
document.fullscreenElement	返回当前处于全屏模式的元素。
document.webkitFullscreenElement	Safari 浏览器中的兼容性属性。
document.mozFullScreenElement	Firefox 浏览器中的兼容性属性。

4. 实际应用场景分析

在实际开发中，监听全屏状态变化可以用于多种场景，例如：

• 视频播放器：根据全屏状态调整播放控件的位置和大小。
• 游戏应用：切换到全屏模式以提供更沉浸式的体验。
• 数据可视化工具：在全屏模式下显示更多细节。

以下是视频播放器中的一个具体实现流程图：

graph TD;
            A[用户点击全屏按钮] --> B{是否支持全屏};
            B --否--> C[提示不支持];
            B --是--> D[进入全屏模式];
            D --> E[监听fullscreenchange事件];
            E --> F{是否处于全屏};
            F --是--> G[调整界面布局];
            F --否--> H[恢复默认布局];