-1

is it possible on HTML page load, automatically (without the user input)read the file in the same directory, and put it on the content?

consider text file (a.txt) in the same folder as my HTML file (index.html)

for example

var reader = new FileReader();
    reader.onload = function (e) {
    const fileText = await fetch("a.txt").text();
    const tagElement = document.getElementById("about_layer");
    tagElement.innerText = fileText; 
    }

add HTML code

<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>
mehrdad
  • 11
  • 3

1 Answers1

0

Fetch returns a Promise that resolves to a Response object. If you want to decode the response as text, then you'll have to await the text() method as it also returns a Promise, which resolves to a string.

As for on page load, just make sure you add a defer tag to your script to ensure that your script is called after the DOM is loaded.

(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>
Emiel Zuurbier
  • 19,095
  • 3
  • 17
  • 32
  • tnx for the tip, can you add more detail about how to add a defer tag to your script to ensure that your script is called after the DOM is loaded – mehrdad Sep 12 '22 at 05:05
  • 1
    it doesn't work "Failed to load resource: net::ERR_FAILED" – mehrdad Sep 12 '22 at 19:46
  • Can you give more info about the *why* the request failed? Like error codes and messages? – Emiel Zuurbier Sep 12 '22 at 19:48
  • I add my html code , can you use an arbitrary a.txt file to see what error is produced – mehrdad Sep 12 '22 at 19:59
  • 1
    Please don't modify the question with the provided answer; this makes the answer and the question look strange for anyone not familiar with our discussion. You can see information in the `network` tab of your browser or even in the console for that matter. If you don't know how to debug your code, then this is a chance to learn it. – Emiel Zuurbier Sep 12 '22 at 20:04
  • I add comments to clear the question not change, also I know how to use the debug code, I've just intended to reduce miscommunication, this is the error code from console " Access to fetch at 'file:///C:/a.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, edge, chrome-untrusted, https, isolated-app." – mehrdad Sep 12 '22 at 20:10
  • Try changing the Fetch call to `await fetch('/a.txt', { mode: 'no-cors' });` and see if it runs. – Emiel Zuurbier Sep 12 '22 at 20:17
  • GET file:///C:/a.txt net::ERR_FILE_NOT_FOUND I think GET file does not guarantee to look in the same directory – mehrdad Sep 12 '22 at 20:30
  • `./a.text` should look in the same dir as the JS file is being executed. – Emiel Zuurbier Sep 12 '22 at 20:44
  • I used the following command to be sure select the file , the error ERR_FILE_NOT_FOUND gone but nothing is displayed myfile=location.href.slice(0,location.href.lastIndexOf("/"))+"/a.txt" – mehrdad Sep 12 '22 at 21:22