如何使用原生无依赖JS获取网站指定文件夹下的所有文件名

实现方案 #

首先明确：受浏览器安全沙箱限制，前端JavaScript本身没有直接读取服务端文件夹目录的原生权限，所以可通过以下两种无第三方依赖的方案实现自动加载objects目录下的所有JSON文件，同时兼容本地静态站点和repl.it环境。 #

方案1：静态清单文件（最稳定，推荐） #

该方案仅需额外维护一个清单文件，不需要修改服务端配置，兼容性最好。

1. 首先在objects文件夹下新建名为index.json的文件，内容为当前文件夹下所有JSON文件的文件名列表：

[
  "ship1.json",
  "box1.json",
  "bigplatform1.json",
  "bigbox1.json"
]

后续新增JSON文件时，只需要往这个数组里加对应的文件名即可，不需要修改主业务代码。
2. 修改你的JS代码，先拉取这个清单文件，遍历后自动调用getFile：

var dataQueue = {};

// 优化后的getFile函数，增加请求成功判断
function getFile(theFile, index, callback) {
  var txtFile = new XMLHttpRequest();
  txtFile.open("GET", theFile, true);
  // send方法用于发送请求体，GET请求没有请求体所以传null
  txtFile.send(null);
  txtFile.onreadystatechange = function() {
    if (txtFile.readyState === 4) {
      // 增加状态码判断，避免404等异常情况触发报错
      if (txtFile.status === 200) {
        dataQueue[index] = JSON.parse(txtFile.response);
        callback?.();
      }
    }
  }
}

// 自动加载所有JSON文件
function loadAllObjects() {
  // 先拉取清单文件
  getFile("objects/index.json", "fileList", function() {
    const fileList = dataQueue.fileList;
    // 遍历清单自动调用getFile
    fileList.forEach(filename => {
      // 取文件名不带后缀作为index，比如ship1.json对应index为ship1
      const index = filename.replace(".json", "");
      getFile(`objects/${filename}`, index);
    });
    // 加载完成后可以删掉临时存储的fileList
    delete dataQueue.fileList;
  });
}

// 调用启动即可
loadAllObjects();

方案2：解析目录索引页（不需要手动维护清单） #

如果你的静态服务开启了目录浏览功能（repl.it默认支持，本地用serve等静态服务器也默认开启），请求/objects/路径会返回包含所有文件链接的HTML页面，你可以解析这个页面提取所有JSON文件名。

// 自动获取objects目录下所有JSON文件名
function getObjectFileList(callback) {
  const req = new XMLHttpRequest();
  req.open("GET", "objects/", true);
  req.send(null);
  req.onreadystatechange = function() {
    if (req.readyState === 4 && req.status === 200) {
      // 创建临时DOM解析返回的HTML
      const tempDom = document.createElement("div");
      tempDom.innerHTML = req.responseText;
      // 提取所有a标签的href，过滤出.json结尾的文件
      const fileList = Array.from(tempDom.querySelectorAll("a"))
        .map(a => a.getAttribute("href"))
        .filter(href => href.endsWith(".json"));
      callback(fileList);
    }
  }
}

// 配合你的getFile使用
getObjectFileList(fileList => {
  fileList.forEach(filename => {
    const index = filename.replace(".json", "");
    getFile(`objects/${filename}`, index);
  });
});

注意：这个方案依赖服务端返回的目录页结构，如果更换静态服务可能需要调整选择器，稳定性不如方案1。

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