如何在Firefox浏览器中保存全屏状态？

嘿，我来帮你搞定Firefox里保存全屏状态的问题～首先得明确一个核心限制：浏览器的全屏API出于安全考虑，不允许页面无用户交互自动进入全屏——必须是用户主动点击、按键这类操作触发才行。所以我们没法让页面刷新后直接自动全屏，但可以通过本地存储记录状态，在用户下次和页面交互时自动恢复。

下面是具体的实现步骤：

1. 用localStorage存储全屏状态 #

我们可以借助浏览器的localStorage来保存用户最后一次的全屏状态（全屏/非全屏），这样页面刷新后能读取这个标记，判断是否需要恢复。

2. 修改切换函数，同步更新存储状态 #

把你原来的切换函数调整一下，每次切换全屏时，同步把当前状态存入localStorage：

const htmlElement = document.getElementsByTagName('html')[0];

function toggleFullScreen() {
  if (!document.mozFullScreen) {
    if (htmlElement.mozRequestFullScreen) {
      htmlElement.mozRequestFullScreen();
      // 保存全屏状态到本地存储
      localStorage.setItem('isFullScreen', 'true');
    }
  } else {
    if (document.mozCancelFullScreen) {
      document.mozCancelFullScreen();
      // 保存非全屏状态到本地存储
      localStorage.setItem('isFullScreen', 'false');
    }
  }
}

// 绑定点击事件触发切换
document.addEventListener('click', toggleFullScreen);

3. 页面加载时恢复全屏状态（需用户交互触发） #

因为浏览器禁止无用户操作的自动全屏，所以我们不能在页面加载完成后直接调用全屏方法。但可以在用户第一次和页面交互时（比如首次点击），检查localStorage里的状态，如果之前是全屏，就自动触发全屏：

// 页面初始化完成后设置恢复逻辑
document.addEventListener('DOMContentLoaded', () => {
  // 只在首次点击时执行恢复逻辑
  function restoreFullScreenOnFirstClick() {
    const savedState = localStorage.getItem('isFullScreen');
    if (savedState === 'true' && !document.mozFullScreen) {
      htmlElement.mozRequestFullScreen();
    }
    // 执行一次后移除监听，避免重复触发
    document.removeEventListener('click', restoreFullScreenOnFirstClick);
  }

  document.addEventListener('click', restoreFullScreenOnFirstClick);
});

关键注意点 #

• 必须用户交互触发：这是浏览器的强制安全规则，任何无用户操作的自动全屏请求都会被直接拦截。
• 兼容性：上面的代码用了Firefox专属的moz前缀，如果需要兼容其他浏览器，可以补充webkit、ms前缀，或者直接使用标准的requestFullscreen方法。
• 存储生命周期：localStorage里的状态会一直保留在用户浏览器中，直到用户手动清除缓存，或者你用代码删除这个键值对。

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