如何使用原生JavaScript读取服务端静态txt文件并写入页面div元素

核心实现逻辑 #

因为是纯静态站点、资源全部托管在当前站点域名下，不存在跨域问题，直接使用原生fetchAPI请求对应路径的TXT文件即可，完全不需要处理用户本地文件读取的相关逻辑。
跨目录的资源定位优先采用站点根绝对路径，不受当前HTML、JS文件存放位置的影响，是最稳定的实现方式。

分步实现 #

1. 通用展示页结构搭建 #

页面只需要预留用于写入内容的主div，以及引入渲染逻辑的JS文件即可，JS可以放在任意子目录：

<!-- 预留内容渲染容器 -->
<div id="article-content"></div>
<!-- 示例：JS放在根目录/js子目录下，和页面不在同一目录 -->
<script src="/js/post-renderer.js"></script>

2. 跨目录资源定位规则 #

• 绝对路径写法：所有资源路径以/开头，代表从站点根目录开始匹配，比如站点根目录下的posts/2024/my-post.txt就写/posts/2024/my-post.txt，不管当前执行JS的HTML、JS文件放在哪个层级的子目录，都能精准匹配到资源位置。
• 推荐搭配URL参数动态指定路径：通用展示页不需要硬编码资源路径，访问时通过URL参数传入对应TXT的站点内相对路径即可，比如访问站点的article.html?post=posts/life/travel-note.txt，就能自动读取对应目录下的TXT资源。

3. 渲染逻辑代码 #

放在/js/post-renderer.js里的代码逻辑：

// 解析URL参数获取要读取的TXT资源路径
const searchParams = new URLSearchParams(window.location.search);
const targetPostPath = searchParams.get('post');
const contentContainer = document.getElementById('article-content');

// 非法参数兜底
if (!targetPostPath) {
    contentContainer.innerHTML = '<p>未指定有效文章资源</p>';
    throw new Error('缺少文章路径参数');
}

// 读取并渲染资源
fetch(`/${targetPostPath}`)
    .then(res => {
        // 处理资源不存在、读取失败的异常
        if (!res.ok) throw new Error(`资源加载失败，状态码${res.status}`);
        return res.text();
    })
    .then(htmlContent => {
        // 直接将读取到的TXT内容写入主div
        contentContainer.innerHTML = htmlContent;
    })
    .catch(err => {
        contentContainer.innerHTML = `<p>文章加载失败：${err.message}</p>`;
    });

常见注意事项 #

• 不要使用相对路径（比如../posts/xxx.txt）定位跨目录资源，一旦HTML文件的存放层级调整，就会出现路径匹配错误，站点根绝对路径是跨目录场景下的最优选择。
• 所有TXT资源必须托管在当前站点的可访问目录下，通过HTTP/HTTPS协议可以正常访问，不会触发浏览器的本地文件权限限制。
• TXT文件内嵌入的HTML标签可以直接被innerHTML解析渲染，不需要额外的格式转换。
• 如果需要固定加载某篇文章，直接把fetch路径替换成对应的绝对路径即可，不需要走URL参数的逻辑。

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