如何通过 JavaScript 从指定 URL 加载并显示纯文本文件内容-html教程-PHP中文网

如何通过 JavaScript 从指定 URL 加载并显示纯文本文件内容

本文介绍在 WordPress 环境中（禁用插件）不依赖用户手动选择文件，而是直接通过固定 URL 自动加载并解析远程 .txt 文件的完整实现方案，包含跨域处理、错误捕获与 DOM 安全渲染。

本文介绍在 wordpress 环境中（禁用插件）不依赖用户手动选择文件，而是直接通过固定 url 自动加载并解析远程 `.txt` 文件的完整实现方案，包含跨域处理、错误捕获与 dom 安全渲染。

在 WordPress 中受限于插件禁用政策时，若需动态展示托管在 CDN 或外部服务器（如 S3）上的纯文本文件（例如课程表 testtutor.csv_.txt），不应使用 <input type="file"> 手动上传，而应采用 客户端发起的 HTTP 请求（如 fetch）拉取远程文本资源。原始代码中混用了 FileReader（仅适用于本地文件对象）和静态 URL，这是根本性错误——FileReader.readAsText() 无法读取网络路径，必须改用 fetch()。

以下是推荐的健壮实现方案：

✅ 正确做法：使用 `fetch()` 加载远程文本文件

<div id="txt-content">
  <p>正在加载文本内容...</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review"><img
														src="https://img.php.cn/upload/skill/000/000/081/179084711841712.jpg" alt="Java Maven Code Review" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="overflowclass">Java Maven Code Review</a>
													<p class="overflowclass">审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。</p>
												</div>
												<a rel="nofollow" href="/xiazai/skill6235" title="Java Maven Code Review" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
</div>

<script>
const TEXT_FILE_URL = 'https://hwdsbcommons.s3.amazonaws.com/wp-content/uploads/sites/16166/2024/05/testtutor.csv_.txt';

// 使用 fetch 获取文本内容（支持 CORS）
async function loadTextFile() {
  const container = document.getElementById('txt-content');
  try {
    const response = await fetch(TEXT_FILE_URL);
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`);
    }
    const text = await response.text();

    // 安全渲染：避免 XSS，使用 textContent 而非 innerHTML
    container.textContent = text;

  } catch (err) {
    console.error('加载文本文件失败：', err);
    container.innerHTML = `<p style="color:red;">❌ 加载失败：${err.message}`;
  }
}

// 页面加载完成后自动执行
document.addEventListener('DOMContentLoaded', loadTextFile);
</script>

⚠️ 关键注意事项

CORS 限制：目标服务器（如 S3）必须配置响应头 Access-Control-Allow-Origin: *（或指定你的 WordPress 域名），否则浏览器将拦截请求。若无控制权，需联系管理员配置，或改用服务端代理（但本场景禁止插件，故不可行）。
不要用 document.write()：它会覆盖整个页面，已废弃；应操作 DOM 元素（如 textContent 或 innerText）进行局部更新。
避免硬编码敏感路径：URL 可提取为变量或通过 data-* 属性注入，便于维护。
字符编码：fetch().text() 默认按 UTF-8 解析，确保源文件保存为 UTF-8 编码（尤其含中文或特殊符号时）。
缓存控制：S3 等静态托管服务可能缓存旧版本。可在 URL 后添加时间戳参数（如 ?v=${Date.now()}）强制刷新（生产环境建议改用 ETag 或版本号）。

? 进阶提示：格式化显示（可选）

若文本为结构化数据（如空格/制表符分隔），可进一步解析并渲染为表格：

// 示例：按换行分割，再按空格/引号智能拆分（简单版）
const lines = text.trim().split('\n');
const htmlRows = lines.map(line => 
  `<tr><td>${line.replace(/"/g, '').trim()}</td></tr>`
).join('');
container.innerHTML = `

${htmlRows}

总之，fetch() 是现代浏览器加载远程文本的标准且唯一可行方式，替代已失效的 FileReader 方案。只要服务端开启 CORS，即可实现全自动、免交互、可维护的内容同步。