如何规避Firefox中文件选择器的5秒用户激活超时限制？

针对你描述的流程（用户点击加载按钮→弹窗确认→超时后文件选择器被拦截），以下是Firefox下的可行解决方案：

方案1：使用File System Access API（推荐，Firefox 118+） #

核心思路是在用户初始点击的激活窗口期内发起文件选择器请求，后续用户确认的时间不会影响请求的有效性，因为授权已经在交互瞬间获得。

代码实现 #

// 获取页面元素
const loadFileBtn = document.getElementById('load-file-btn');
const unsavedAlert = document.getElementById('unsaved-changes-alert');
const confirmLoadBtn = document.getElementById('confirm-load');
const cancelLoadBtn = document.getElementById('cancel-load');

loadFileBtn.addEventListener('click', async () => {
  const abortController = new AbortController();
  let filePickerTask;

  // 立即在用户激活状态下发起文件选择器请求
  try {
    filePickerTask = window.showOpenFilePicker({
      signal: abortController.signal,
      types: [{ 
        description: '支持的文件类型', 
        accept: { 'text/plain': ['.txt'], 'application/json': ['.json'] } 
      }]
    });
  } catch (err) {
    // 用户提前关闭文件选择器或其他错误，直接退出
    return;
  }

  // 显示未保存修改的警告弹窗
  unsavedAlert.style.display = 'block';

  // 确认加载的逻辑
  confirmLoadBtn.onclick = async () => {
    unsavedAlert.style.display = 'none';
    try {
      const [fileHandle] = await filePickerTask;
      const file = await fileHandle.getFile();
      const content = await file.text();
      // 替换当前文件缓冲区内容
      updateFileBuffer(content);
    } catch (err) {
      if (err.name !== 'AbortError') {
        console.error('文件加载失败:', err);
      }
    }
  };

  // 取消加载的逻辑
  cancelLoadBtn.onclick = () => {
    unsavedAlert.style.display = 'none';
    abortController.abort(); // 取消文件选择器请求
  };
});

// 示例：更新文件缓冲区的函数
function updateFileBuffer(content) {
  // 这里替换为你的缓冲区更新逻辑
  console.log('更新缓冲区内容:', content);
}

为什么这个方案有效 #

Firefox的用户激活机制仅要求请求发起在用户交互的5秒窗口期内，而showOpenFilePicker()返回的Promise会一直保持授权状态，直到请求被取消或完成。即使用户过了10秒才确认，只要没有取消请求，就能正常获取文件结果。

方案2：旧版Firefox降级方案（118以下） #

如果需要兼容旧版Firefox，只能调整交互逻辑：在用户点击加载按钮时，先显示弹窗，同时在弹窗的确认按钮点击时，检查用户激活状态是否有效：

• 如果有效（5秒内确认），直接触发文件选择器；
• 如果无效，引导用户再次点击加载按钮。

代码示例 #

const loadFileBtn = document.getElementById('load-file-btn');
const unsavedAlert = document.getElementById('unsaved-changes-alert');
const confirmLoadBtn = document.getElementById('confirm-load');
const cancelLoadBtn = document.getElementById('cancel-load');
const fileInput = document.createElement('input');
fileInput.type = 'file';
fileInput.style.display = 'none';
document.body.appendChild(fileInput);

loadFileBtn.addEventListener('click', () => {
  // 显示警告弹窗
  unsavedAlert.style.display = 'block';
});

confirmLoadBtn.onclick = () => {
  unsavedAlert.style.display = 'none';
  // 检查用户激活状态是否有效
  if (navigator.userActivation.isActive) {
    fileInput.click();
  } else {
    // 激活过期，提示用户重新操作
    alert('操作超时，请重新点击"加载文件"按钮');
  }
};

cancelLoadBtn.onclick = () => {
  unsavedAlert.style.display = 'none';
};

// 处理文件选择
fileInput.addEventListener('change', async () => {
  if (!fileInput.files[0]) return;
  const content = await fileInput.files[0].text();
  updateFileBuffer(content);
  // 重置input，以便下次选择同一文件能触发change事件
  fileInput.value = '';
});

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