本地打开HTML页面时，如何检测同目录文件是否存在

嘿，这个问题在本地使用场景下确实有点棘手，因为浏览器的安全策略（同源策略）对本地文件的访问有不少限制，但针对仅本地使用的场景，还是有几个可行的方案的，我给你详细说说：

方案1：使用 fetch API（推荐现代浏览器） #

现代浏览器里，fetch 是比较简洁的方式，但要注意浏览器的本地文件访问限制——比如Chrome默认会阻止本地文件的AJAX请求，Firefox则相对宽松。

代码示例： #

async function checkFileExists(filePath) {
  try {
    const response = await fetch(filePath, { method: 'HEAD' });
    // 如果响应状态码在200-299之间，说明文件存在
    return response.ok;
  } catch (error) {
    // 捕获到错误通常意味着文件不存在，或者浏览器阻止了访问
    return false;
  }
}

// 调用示例：检测同目录下的test.txt文件
checkFileExists('./test.txt').then(exists => {
  if (exists) {
    console.log('文件存在！');
  } else {
    console.log('文件不存在，或者浏览器阻止了访问');
  }
});

注意事项： #

• Chrome用户：默认情况下Chrome会禁止本地文件的AJAX请求，你需要启动Chrome时添加参数来关闭安全限制：

  # Windows系统示例
  chrome.exe --allow-file-access-from-files
  # macOS系统示例
  open -a "Google Chrome" --args --allow-file-access-from-files
  

• Firefox用户：无需额外设置，默认允许本地文件的AJAX请求，直接运行代码即可。

方案2：使用传统的 XMLHttpRequest #

如果需要兼容更老的浏览器，可以用XHR代替fetch，逻辑是一样的：

代码示例： #

function checkFileExists(filePath, callback) {
  const xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4) {
      // 状态码200表示存在，404表示不存在（注意本地环境下可能状态码不太标准）
      callback(xhr.status === 200);
    }
  };
  xhr.onerror = function() {
    callback(false);
  };
  xhr.open('HEAD', filePath, true);
  xhr.send();
}

// 调用示例
checkFileExists('./test.txt', function(exists) {
  console.log(exists ? '文件存在' : '文件不存在或被阻止');
});

关键限制说明 #

• 只能检测同目录或子目录下的文件，无法访问上级目录（浏览器的安全限制）。
• 不同浏览器的行为差异较大，所以如果要在多浏览器下使用，最好提前测试。
• 这种方法仅适用于本地打开HTML文件的场景，部署到服务器上的话逻辑会更简单（没有本地文件限制）。

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