如何检查文件是否存在并输出？及页面加载自动执行URL检测方案

1. 如何检查文件是否存在并输出结果？ #

在前端场景下，我们一般通过发送HTTP请求来判断远程文件是否存在，核心是根据请求的响应状态来判定：

• 如果请求返回200-299范围内的状态码，说明文件存在；
• 如果返回404状态码，则表示文件不存在；
• 若出现跨域、网络故障等其他问题，需要做异常捕获处理。

用Fetch API实现的示例代码如下：

function checkFileExists(fileUrl) {
  fetch(fileUrl)
    .then(response => {
      if (response.ok) {
        console.log(`✅ 文件存在：${fileUrl}`);
        // 将结果输出到页面指定元素，比如一个div
        document.getElementById('result').textContent = `文件存在：${fileUrl}`;
      } else {
        console.log(`❌ 文件不存在：${fileUrl}`);
        document.getElementById('result').textContent = `文件不存在：${fileUrl}`;
      }
    })
    .catch(error => {
      console.error(`⚠️ 检测出错：${error.message}`);
      document.getElementById('result').textContent = `检测出错：${error.message}`;
    });
}

2. 移除输入框与按钮，页面加载时自动检测指定URL #

针对你的需求，我们可以直接删除输入框和按钮，提前定义好目标URL变量，然后在页面加载完成后自动触发检测逻辑。以下是完整的修改示例：

<!-- 仅保留用于展示结果的元素，替代原输入框和按钮 -->
<div id="answer"></div>

<script>
// 替换为你的目标地址
const url = "http://webs...";

// 页面加载完成后立即执行检测
window.onload = function() {
  checkAndDisplayResult(url);
};

function checkAndDisplayResult(targetUrl) {
  fetch(targetUrl)
    .then(response => {
      const resultElement = document.getElementById('answer');
      if (response.ok) {
        resultElement.textContent = `文件已找到：${targetUrl}`;
      } else {
        resultElement.textContent = `文件未找到（状态码：${response.status}）`;
      }
    })
    .catch(error => {
      document.getElementById('answer').textContent = `检测失败：${error.message}`;
    });
}
</script>

关键修改说明：

• 删除了原有的<input>和<button>元素，只保留用于展示结果的<div id="answer">（如果习惯用输入框展示，也可以保留原<input type="text" id="answer">，改用value属性赋值结果）；
• 提前定义url变量存储目标地址；
• 通过window.onload监听页面加载完成事件，自动调用检测函数；
• 检测逻辑和第一个问题一致，最终将结果直接输出到页面的结果元素中。

注意：如果目标URL和你的页面不在同一域名下，需要确保目标服务器开启了CORS（跨域资源共享），否则浏览器会拦截请求，导致检测失败。

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