是否可以在HTML页面加载时，自动(无需用户输入(读取同一目录中的文件，并将其放在内容中？
考虑将文本文件(a.txt(与我的HTML文件(index.HTML(放在同一文件夹中
例如
var reader = new FileReader();
reader.onload = function (e) {
const fileText = await fetch("a.txt").text();
const tagElement = document.getElementById("about_layer");
tagElement.innerText = fileText;
}
添加HTML代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<meta name="generator" >
<style type="text/css">
</style>
<script type="text/javascript" defer>
async function getTextFile1() {
try {
const response = await fetch("/a.txt");
const fileText = await response.text();
const tagElement = document.getElementById("about_layer");
tagElement.innerText = fileText;
} catch (error) {
console.log(error);
}
}
async function getTextFile() {
const fileText = await fetch("a.txt").text();
const tagElement = document.getElementById("about_layer");
tagElement.innerText = fileText;
}
window.onload = getTextFile1;
</script>
</head>
<body>
<div >hsfghfghdfghdfg
</div>
<div id="about_layer">
</div>
</body>
</html>
Fetch返回一个解析为Response对象的Promise。如果您想将响应解码为文本，那么您必须等待text()方法，因为它还返回一个Promise，它解析为字符串。
至于页面加载上的，只需确保在脚本中添加defer标记，以确保在加载DOM后调用脚本。
(async function() {
try {
const response = await fetch("./a.txt", {
mode: 'no-cors'
});
const fileText = await response.text();
const tagElement = document.getElementById("about_layer");
tagElement.innerText = fileText;
} catch (error) {
console.log(error);
}
}())
<script src="yourscript.js" defer></script>