如何在JavaScript中实现页面刷新后仍保持全屏模式

要解决这个问题，核心是区分用户主动退出全屏和页面刷新导致的全屏中断——浏览器原生全屏API没有直接提供场景区分能力，我们可以通过状态标记+会话存储来实现：

关键思路 #

• 用sessionStorage存储刷新状态标记：页面刷新时sessionStorage会保留，主动关闭标签页/跳转则会清除
• 监听全屏变化事件，结合标记判断是主动退出还是刷新导致的退出
• 页面加载完成后，根据标记自动重新进入全屏

具体实现代码 #

<!DOCTYPE html>
<html>
<head>
    <title>强制全屏页面</title>
</head>
<body>
    <!-- 页面内容 -->
    <script>
        // 兼容各浏览器的全屏请求函数
        function requestFullscreen(element) {
            if (element.requestFullscreen) {
                element.requestFullscreen();
            } else if (element.webkitRequestFullscreen) {
                element.webkitRequestFullscreen();
            } else if (element.mozRequestFullScreen) {
                element.mozRequestFullScreen();
            } else if (element.msRequestFullscreen) {
                element.msRequestFullscreen();
            }
        }

        // 兼容各浏览器的全屏状态检测
        function isFullscreen() {
            return !!(document.fullscreenElement || 
                      document.webkitFullscreenElement || 
                      document.mozFullScreenElement || 
                      document.msFullscreenElement);
        }

        // 页面加载完成后处理
        window.addEventListener('load', () => {
            const isRefresh = sessionStorage.getItem('isRefresh');
            if (isRefresh) {
                sessionStorage.removeItem('isRefresh');
                requestFullscreen(document.documentElement);
            } else {
                // 首次进入页面直接请求全屏，若浏览器拦截可改为用户点击触发
                requestFullscreen(document.documentElement);
            }
        });

        // 页面刷新/关闭时标记状态
        window.addEventListener('beforeunload', () => {
            sessionStorage.setItem('isRefresh', 'true');
        });

        // 监听全屏状态变化
        document.addEventListener('fullscreenchange', handleFullscreenChange);
        document.addEventListener('webkitfullscreenchange', handleFullscreenChange);
        document.addEventListener('mozfullscreenchange', handleFullscreenChange);
        document.addEventListener('MSFullscreenChange', handleFullscreenChange);

        function handleFullscreenChange() {
            // 仅当无刷新标记且退出全屏时，执行跳转
            if (!isFullscreen() && !sessionStorage.getItem('isRefresh')) {
                window.location.href = '/your-redirect-page.html';
            }
        }
    </script>
</body>
</html>

代码说明 #

1. 兼容函数：requestFullscreen和isFullscreen统一处理不同浏览器的全屏API前缀，避免兼容性问题
2. 刷新标记逻辑：beforeunload事件触发时设置标记，页面加载时读取标记并重新请求全屏，随后清除标记避免重复触发
3. 全屏变化判断：只有当用户主动退出全屏（无刷新标记）时，才执行跳转操作，刷新导致的全屏中断不会触发跳转

注意事项 #

• 浏览器安全限制：全屏请求必须由用户交互触发（比如点击事件），首次进入页面直接调用可能被拦截。可以在页面添加「进入全屏」按钮，点击后再执行全屏请求并存储进入标记。
• 测试验证：刷新页面时，浏览器会先退出全屏再重新加载，代码通过标记确保重新加载后自动恢复全屏，且不会触发跳转逻辑。

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