如何使用JS读取1.txt文本内容替换HTML页面指定位置文本

现有代码错误点 #

• file.open(GET,'file:///d:/1.txt', true) 中请求方法GET是字符串类型，未加引号会被识别为未定义变量，直接抛出语法错误
• file.responseType = Text 中Text同样是未加引号的字符串，应为小写的'text'，如果使用responseText属性也可以省略该配置
• 缺少file.send()调用，XMLHttpRequest仅调用open不会发起实际请求
• DOM修改逻辑写在异步请求回调外部，请求还未返回结果就会执行赋值操作，拿到的text是未定义值
• text变量未提前声明，请求失败时赋值给innerHTML会抛出异常
• window.onLoad = load() 存在两处错误：一是事件名大小写错误，正确为全小写的window.onload；二是load()会立即执行函数，而非将函数作为回调绑定给加载事件，应写成window.onload = load
• 直接使用file://协议打开HTML时，浏览器同源策略会禁止读取本地磁盘文件，触发跨域错误，请求会直接失败

正确实现方案 #

方案1：本地服务部署实现自动读取 #

如果需要页面加载后自动读取1.txt，需要将HTML文件和1.txt放在同一目录下，使用本地HTTP服务启动（比如VS Code的Live Server插件、Python自带的http.server等），避免跨域限制，对应代码如下：

<body class="htmlNoPages">
  <div id="main"><p>Replace me!!</p></div>
</body>
<script type="text/javascript" id="gwd-init-code">
function load() {
  const file = new XMLHttpRequest();
  // 同目录下直接写文件名即可，避免写死本地绝对路径
  file.open('GET', '1.txt', true);
  file.onreadystatechange = function() {
    if (file.readyState === 4 && file.status === 200) {
      const text = file.responseText;
      const element = document.querySelector('#main');
      element.innerHTML = text;
    }
  }
  file.send();
}   
window.onload = load;
</script>

方案2：用户手动选择文件，无需服务 #

如果不想搭建本地服务，可以添加文件选择入口，让用户手动选择本地的1.txt，不会触发浏览器安全限制，兼容性更强：

<body class="htmlNoPages">
  <input type="file" id="fileSelector" accept=".txt">
  <div id="main"><p>Replace me!!</p></div>
</body>
<script>
document.querySelector('#fileSelector').addEventListener('change', e => {
  const file = e.target.files[0];
  if (!file) return;
  const reader = new FileReader();
  reader.onload = res => {
    document.querySelector('#main').innerHTML = res.target.result;
  }
  reader.readAsText(file);
})
</script>

内容的提问来源于stack exchange，提问作者Mini Bus Pug