前端js读取本地md或txt文件内容

html 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>前端js读取本地md或txt文件内容</title>
  </head>
  <body>
    <script>
      function readTextFile(fileName) {
        var rawFile = new XMLHttpRequest()
        var filePath = location.origin + '/' + fileName
        rawFile.open('GET', fileName, false)
        rawFile.onreadystatechange = function () {
          if (rawFile.readyState === 4) {
            if (rawFile.status === 200 || rawFile.status == 0) {
              var allText = rawFile.responseText
              document.getElementById('showmd').innerHTML = allText
              console.log(666.20001, allText, location)
            }
          }
        }
        rawFile.send(null)
      }
    </script>
    <div id="showmd"></div>
    <button onclick="readTextFile('text.md')">测试按钮</button>
    <button onclick="readTextFile('public/text.md')">测试按钮2</button>
  </body>
</html>
相关推荐
遗憾随她而去.11 分钟前
前端首屏加载时间的度量:FCP、LCP等指标的规范理解
前端
TAEHENGV13 分钟前
React Native for OpenHarmony 实战:数学练习实现
javascript·react native·react.js
CDwenhuohuo13 分钟前
安卓app巨坑 nvue后者页面要写画笔绘制功能nvue canvas
前端·javascript·vue.js
一只小bit18 分钟前
Qt 事件:覆盖介绍、处理、各种类型及运用全详解
前端·c++·qt·cpp
Never_Satisfied23 分钟前
在JavaScript / HTML中,HTML元素自定义属性使用指南
开发语言·javascript·html
前端 贾公子28 分钟前
husky 9.0升级指南
javascript
人道领域32 分钟前
JavaWeb从入门到进阶(前端工程化)
前端
shughui42 分钟前
APP、Web、H5、iOS与Android的区别及关系
android·前端·ios
Amumu121381 小时前
React Router 6介绍
前端·react.js·前端框架
南村群童欺我老无力.1 小时前
Flutter 框架跨平台鸿蒙开发 - 打造表情包制作器应用
开发语言·javascript·flutter·华为·harmonyos