HTML页面加载时自动读取同目录文本文件并显示的实现方案

完全可以实现，不需要用户手动操作，通过浏览器的Fetch API结合页面加载事件就能完成。

错误示例的问题分析 #

这段代码存在多处逻辑错误：

• 混淆了FileReader和Fetch API的用途：FileReader用于读取用户通过文件选择器上传的本地文件，而读取同目录下的服务器文件应该用Fetch API。
• await关键字不能在普通函数中使用：reader.onload是普通函数，直接使用await会抛出语法错误。
• 整体逻辑冗余且错配：既创建了FileReader实例又调用了fetch，两者功能重叠且逻辑不通。

// 错误代码示例
var reader = new FileReader();
    reader.onload = function (e) {
    const fileText = await fetch("a.txt").text();
    const tagElement = document.getElementById("about_layer");
    tagElement.innerText = fileText; 
    }

完整实现方案 #

下面是可以直接运行的完整代码，核心思路是：

1. 用window.onload监听页面加载完成事件
2. 用Fetch API异步读取同目录下的a.txt文件
3. 将读取到的文本内容插入到页面指定元素中
4. 添加异常捕获，处理文件不存在或网络错误的情况

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>自动读取文本文件示例</title>
<style type="text/css">
</style>
<script type="text/javascript" defer>     
 
 async function getTextFile() {
  try {
    // 读取同目录下的a.txt，路径直接写文件名即可
    const response = await fetch("a.txt");
    // 检查请求是否成功
    if (!response.ok) {
      throw new Error(`文件读取失败，状态码：${response.status}`);
    }
    const fileText = await response.text();
    const tagElement = document.getElementById("about_layer");
    tagElement.innerText = fileText; 
  } catch (error) {
    console.error("读取文件时出错：", error);
  }
 } 

// 页面加载完成后自动执行读取操作
window.onload = getTextFile;
</script> 
</head>
<body>
<div>示例占位文本</div>
<div id="about_layer">
<!-- 文本内容将在这里展示 -->
</div>
</body>
</html>

注意事项 #

• 必须在服务器环境下运行（比如用VS Code的Live Server插件、Apache、Nginx等），直接双击打开本地HTML文件会触发跨域限制，导致Fetch请求失败。
• 确保a.txt和HTML文件在同一目录下，路径要正确。如果文件在子目录，路径写成./子目录/a.txt即可。

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