前端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>
相关推荐
无奈何杨7 分钟前
CoolGuard增加枚举字段支持,条件编辑优化,展望指标取值不同
前端·后端
掘金安东尼9 分钟前
工具过多:如何管理前端工具泛滥?
前端
江城开朗的豌豆20 分钟前
从生命周期到useEffect:我的React函数组件进化之旅
前端·javascript·react.js
brzhang29 分钟前
当AI接管80%的执行,你“不可替代”的价值,藏在这20%里
前端·后端·架构
江城开朗的豌豆36 分钟前
React组件传值:轻松掌握React组件通信秘籍
前端·javascript·react.js
Sailing44 分钟前
别再放任用户乱填 IP 了!一套前端 IP 与 CIDR 校验的高效方案
前端·javascript·面试
程序员爱钓鱼3 小时前
Go语言实战案例 — 项目实战篇:简易博客系统(支持评论)
前端·后端·go
excel10 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着11 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友12 小时前
什么是API签名?
前端·后端·安全