HTML全屏状态下如何实现页面重定向？

这个问题确实挺头疼的——浏览器为了防止恶意网站滥用全屏权限，默认会在页面导航时自动退出全屏状态，这也是你之前尝试的代码失效的核心原因。不过如果目标页面是你自己可控的站点，我们可以通过传递全屏标记的方式绕过这个限制，具体方案如下：

可行方案：分两步实现全屏+跳转 #

核心思路是：先在当前页面触发全屏，跳转时告诉目标页面“需要进入全屏”，让目标页面加载后主动发起全屏请求（这个请求属于用户点击触发的交互链，浏览器会允许）。

1. 修改当前页面的按钮点击逻辑 #

我们用sessionStorage来存储“需要全屏”的标记（比URL参数更可靠，不会暴露在地址栏，也不容易被篡改）：

button.onclick = function() {
  if (document.documentElement.requestFullscreen) {
    // 先存入全屏标记
    sessionStorage.setItem('needFullscreen', 'true');
    // 尝试进入当前页面全屏
    document.documentElement.requestFullscreen().then(() => {
      // 全屏成功后跳转
      window.location.replace('/whereIWantToGo.html');
    }).catch(err => {
      // 全屏失败的话，清除标记再跳转
      sessionStorage.removeItem('needFullscreen');
      window.location.replace('/whereIWantToGo.html');
    });
  } else {
    // 不支持全屏API的浏览器直接跳转
    window.location.replace('/whereIWantToGo.html');
  }
};

2. 在目标页面添加全屏触发逻辑 #

在whereIWantToGo.html的脚本里，页面加载时检查标记并发起全屏请求：

window.addEventListener('DOMContentLoaded', function() {
  const needFullscreen = sessionStorage.getItem('needFullscreen');
  if (needFullscreen === 'true' && document.documentElement.requestFullscreen) {
    // 发起全屏请求
    document.documentElement.requestFullscreen().catch(err => {
      console.log('进入全屏失败:', err);
    });
    // 用完标记就清除，避免刷新页面重复触发
    sessionStorage.removeItem('needFullscreen');
  }
});

为什么这个方案能生效？ #

浏览器的全屏API有严格的安全限制：全屏请求必须由用户主动交互（点击、按键等）触发。我们的整个流程从用户点击按钮开始，属于同一个用户交互上下文，所以目标页面的全屏请求会被浏览器认可，不会被拦截。

特殊情况说明 #

如果目标页面不是你自己的站点（无法修改目标页面代码），那很遗憾，没有办法绕过这个限制——因为跨域页面无法获取你设置的标记，而且浏览器也不允许非用户主动触发的跨域全屏请求。这种情况下，只能先跳转，再提示用户手动点击按钮进入全屏。

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