如何讀取和顯示 html 文件

Question

我正在制作 html 編輯器，但問題是當有人需要查看 html 文件時，我不知道如何顯示文件中的文本。

<input type="file" onchange="previewFile()"><br>
<p id="txt1" src="blank.html"></p>

<script>
function previewFile() {
  const preview = document.getElementById('txt1');
  const file = document.querySelector('input[type=file]').files[0];
  const reader = new FileReader();

  reader.addEventListener("load", function () {
    // reads image file to a blob string
    preview.src = window.URL.createObjectURL(file);
  }, false);

  if (file) {
    reader.readAsDataURL(file);
  }
}
</script>

我使用此腳本讀取文件並通過將段落 src 更改為 blob 鏈接來顯示它，但看起來該段落沒有通過使用 src 的 html 文本鏈接獲取文本。 有沒有辦法做到這一點？

Answer 1

該段落沒有src屬性，您需要使用innerText或innerHTML來顯示內容。

 function previewFile() { const content = document.querySelector('.content'); const [file] = document.querySelector('input[type=file]').files; const reader = new FileReader(); reader.addEventListener("load", () => { // this will then display a text file content.innerText = reader.result; }, false); if (file) { reader.readAsText(file); } }

 <input type="file" onchange="previewFile()"><br> <p class="content"></p>

Answer 2

p 標簽不支持src屬性，因此替代解決方案將使用 element.innerHTML= text 或將 p 標簽更改為 iframe