如何在Firefox浏览器中检测文件选择对话框关闭？

我帮你搞定这个Firefox兼容性问题——你遇到的情况确实是Chromium系浏览器（Chrome、Opera、IE11）和Firefox对文件选择对话框的焦点/可见性处理逻辑不一致导致的：Firefox在关闭文件对话框后不会触发document.body.onfocus，所以你的轮询循环永远停不下来。下面给你两个可靠的兼容方案：

方案1：结合可见性变化与焦点监听（适配双浏览器） #

Firefox在文件对话框关闭后会触发document.visibilityState的变化，而Chromium系可以继续用焦点监听。我们同时监听这两个事件，就能覆盖所有场景：

// 注意：这段代码需要放在async函数里执行
async function handleFileSelection() {
  const Input = document.createElement('input');
  Input.type = 'file';
  const ref = { files: undefined, hasClosed: false };

  // 处理Firefox：监听页面可见性恢复
  const handleVisibilityChange = () => {
    if (document.visibilityState === 'visible') {
      ref.hasClosed = true;
      document.removeEventListener('visibilitychange', handleVisibilityChange);
    }
  };
  document.addEventListener('visibilitychange', handleVisibilityChange);

  // 处理Chromium系：监听body获取焦点
  document.body.onfocus = () => {
    ref.hasClosed = true;
    document.body.onfocus = null; // 移除监听避免重复触发
  };

  // 文件选择完成的逻辑
  Input.onchange = function () {
    ref.files = this.files;
    // 清理监听
    document.removeEventListener('visibilitychange', handleVisibilityChange);
    document.body.onfocus = null;
  };

  document.body.appendChild(Input);
  Input.click();

  // 异步轮询，避免阻塞浏览器主线程
  while (ref.files === undefined && !ref.hasClosed) {
    await new Promise(resolve => setTimeout(resolve, 100));
  }

  // 后续处理
  if (ref.files) {
    console.log('用户选择了文件，准备上传');
    // 这里写上传到数据库的逻辑
  } else {
    console.log('用户取消了文件选择');
  }
  document.body.removeChild(Input);
}

// 调用执行
handleFileSelection();

注意：把原来的同步delay(100)换成异步的await setTimeout很重要，不然会卡死浏览器主线程。

方案2：用Promise封装（更优雅的异步写法） #

把文件选择逻辑封装成Promise，同时处理“选择文件”和“取消选择”两种情况，代码更清晰，也兼容所有浏览器：

async function selectFile() {
  return new Promise((resolve) => {
    const input = document.createElement('input');
    input.type = 'file';
    let isResolved = false;

    // 用户选择文件时触发
    input.addEventListener('change', () => {
      if (!isResolved) {
        isResolved = true;
        resolve(input.files);
        cleanup();
      }
    });

    // 用户取消对话框时触发（兼容Firefox和Chromium）
    const handleCancel = () => {
      if (!isResolved) {
        isResolved = true;
        resolve(null);
        cleanup();
      }
    };
    document.addEventListener('visibilitychange', handleCancel);
    window.addEventListener('focus', handleCancel);

    // 清理资源和监听的函数
    const cleanup = () => {
      document.removeEventListener('visibilitychange', handleCancel);
      window.removeEventListener('focus', handleCancel);
      document.body.removeChild(input);
    };

    // 渲染并触发文件选择框
    document.body.appendChild(input);
    input.click();
  });
}

// 使用示例
async function uploadToDatabase() {
  const files = await selectFile();
  if (files && files.length > 0) {
    console.log('开始上传文件:', files[0].name);
    // 这里写上传到数据库的逻辑
  } else {
    console.log('用户取消了操作');
  }
}

// 启动流程
uploadToDatabase();

这个方案用Promise异步处理，不会阻塞浏览器，而且通过visibilitychange和window.focus双监听，确保无论在哪个浏览器，用户取消对话框时都能被正确捕获。

为什么你的原代码在Firefox无效？ #

简单说，Firefox的文件选择对话框是系统级模态窗口，但它的焦点管理逻辑和Chromium不一样：对话框关闭后，Firefox不会主动把焦点交还给document.body，所以document.body.onfocus根本不会触发。而visibilitychange是浏览器标准事件，当页面从对话框遮挡的不可见状态恢复可见时，一定会触发，这在Firefox里是完全可靠的。

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