页面切换或刷新时无法保持全屏模式（Safari正常）求解决方案

问题根源 #

除Safari外，多数浏览器的全屏API属于页面会话绑定状态，页面刷新或跳转后会自动退出全屏——这是浏览器的安全限制，全屏操作必须由用户交互触发，新页面加载后默认不会继承之前的全屏状态。

实现步骤 #

1. 修改HTML（添加按钮ID） #

给全屏按钮添加唯一ID，方便后续JS操作：

<li class="nav-item">
<a id="fullscreenBtn" class="nav-link" data-widget="fullscreen" href="#" role="button">
    <i class="fas fa-expand-arrows-alt fa-lg" style="color:#060606; padding-top:10px;"></i>
</a>
</li>

2. 添加JavaScript逻辑 #

通过本地存储持久化全屏状态，并在页面加载时尝试恢复：

// 监听全屏状态变化，同步本地存储和图标
document.addEventListener('fullscreenchange', () => {
  const isFullscreen = !!document.fullscreenElement;
  localStorage.setItem('isFullscreen', isFullscreen.toString());
  
  // 切换图标（可选，优化交互体验）
  const icon = document.querySelector('#fullscreenBtn i');
  icon.classList.toggle('fa-expand-arrows-alt', !isFullscreen);
  icon.classList.toggle('fa-compress-arrows-alt', isFullscreen);
});

// 页面加载时尝试恢复全屏
window.addEventListener('load', () => {
  const savedState = localStorage.getItem('isFullscreen') === 'true';
  const fullscreenBtn = document.getElementById('fullscreenBtn');
  
  if (savedState) {
    // 模拟按钮点击触发全屏，规避浏览器权限拦截
    fullscreenBtn.click();
  }
});

// 手动实现全屏切换逻辑（替代原有data-widget的自动逻辑，确保状态同步）
document.getElementById('fullscreenBtn').addEventListener('click', (e) => {
  e.preventDefault();
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen().catch(err => {
      console.error(`全屏启动失败: ${err.message}`);
    });
  } else {
    document.exitFullscreen();
  }
});

关键说明 #

• 本地存储持久化：用localStorage保存全屏状态，同源页面跳转/刷新后可读取该状态
• 模拟用户交互：直接调用requestFullscreen()可能被浏览器拦截（非用户触发），通过模拟按钮点击，复用用户之前的交互上下文，提升成功率
• 兼容性处理：标准全屏API已支持多数现代浏览器，无需额外前缀；若需兼容旧版浏览器，可添加webkitRequestFullscreen、mozRequestFullScreen等前缀

特殊情况处理 #

若浏览器仍阻止自动恢复全屏（严格的安全策略），可在页面加载时添加提示：

window.addEventListener('load', () => {
  const savedState = localStorage.getItem('isFullscreen') === 'true';
  if (savedState) {
    // 创建临时提示条
    const notice = document.createElement('div');
    notice.style.cssText = 'position:fixed;top:20px;left:50%;transform:translateX(-50%);padding:8px 16px;background:#333;color:#fff;border-radius:4px;';
    notice.innerHTML = '检测到您之前处于全屏模式，<button onclick="document.getElementById(\'fullscreenBtn\').click();this.parentElement.remove();">点击恢复</button>';
    document.body.appendChild(notice);
    // 3秒后自动隐藏提示
    setTimeout(() => notice.remove(), 3000);
  }
});

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