我正在微控制器上制造NAS（网络附加存储）。 NAS的用户界面将是微控制器本身上托管的网页。该网页将允许用户浏览微控制器上的文件并进行编辑（稍后我将添加更多功能）。更精确地说，文件位于连接到微控制器的SD卡上。到目前为止，我已经编写了自己的HTTP服务器。我目前正在编写用户界面网页。这是我所做的：
当我访问根目录时：index.html in / directory
当我打开文件时：Fichier1.txt in / directory opened
当我打开目录时：index.html in /Dossier1/ directory
这是根目录的index.html文件：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>/</h2>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa fa-folder"></i></span><a href="Dossier1/index.html">Dossier1</a></li>
<li><span class="fa-li"><i class="fa fa-file"></i></span><a href="Fichier1.txt" target="file_viewer">Fichier1.txt</a></li>
</ul>
<iframe name="file_viewer" style="height:100vh;width:100%;border:none;"></iframe>
</body>
</html>如您所见，这些文件是在iframe中打开的，因此无法对其进行编辑。我想知道是否有一种方法可以在文本区域或其他允许用户编辑内容的文件中加载文件。
谢谢！
我想出了一种方法。
这是根目录的新index.html文件：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="height=device-height, width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<h2>/</h2>
<ul class="fa-ul">
<li><span class="fa-li"><i class="fa fa-folder"></i></span><a href="Dossier1/index.html">Dossier1</a></li>
<li><span class="fa-li"><i class="fa fa-file"></i></span><a href="javascript:load_file('Fichier1.txt');">Fichier1.txt</a></li>
</ul>
<textarea id="file_editor" style="height:100vh;width:100%;"></textarea>
<script>
function load_file(file) {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("file_editor").value = this.responseText;
}
};
xhttp.open("GET", file, true);
xhttp.send();
}
</script>
</body>
</html>