2

I would like to make a simple website without cloning HTML files.

I want to store a content in separate text files (or html) in subdirectories (e.g. pages/pagehome.txt, pages/pageabout.txt, pages/pagecontact.txt). I used tag, but it does not allow to reuse css for that embedded content.

I want to import that files to variables and to change divs via innerHTML tag. How can I import content from that files to variables? I don't want to use any complicated APIs or tons of code.

Is there available simply method to load files' content to variables using ONLY JS (No HTML or methods like invisible div with content)?

Eqsz
  • 25
  • 3
  • Have you tried [XMLHttpRequest](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest)? You can just send an HTTP request to `pages/somepage.txt` to get the contents – anut Jan 16 '22 at 14:41
  • I used it and I got [object XMLHttpRequest]. Can you paste a code to use that? My JS code is:
    – Eqsz Jan 16 '22 at 14:49
  • To get the response of an XMLHttpRequest, you need to use the `onload` callback. I will post the full code in an answer. – anut Jan 16 '22 at 14:56

1 Answers1

0

Use an XMLHttpRequest, and use the onload callback to get the response.

<body>
  <div id="divv"></div>
  <script>
    var txtFile = new XMLHttpRequest();
    txtFile.onload = function(e) {
      document.getElementById("divv").innerHTML = txtFile.responseText; 
    }
    txtFile.open("GET", "file.txt", true); 
    txtFile.send(null);
  </script>
</body>

EDIT: It seems you need to access local files, so you can use something like this

<body>
  <div id="divv"></div>
  <script>
    window.onload = function() {
        var iframe = document.createElement('iframe');
        iframe.id = 'iframe';
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
        iframe.src = 'file.txt';
        iframe.onload = function(){
            var text = document.getElementById('iframe').contentDocument.body.firstChild.innerHTML;
            document.getElementById('divv').innerHTML = text;
        };
    }
  </script>
</body>
anut
  • 481
  • 1
  • 11
  • I got an error "Access to XMLHttpRequest at 'file:///C:/.../file.txt' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, brave, chrome-untrusted, https. file.txt:1 Failed to load resource: net::ERR_FAILED" I MUST use local resources, but I got error on real URL Access to XMLHttpRequest at 'http://.../file.txt' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. fil.htm:18 GET http://.../file.txt net::ERR_FAILED 200 – Eqsz Jan 16 '22 at 16:38
  • To fix CORS, you will have to change the configuration for whichever server you are calling. If you do not own that server, you will have to [bypass CORS](https://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy). – anut Jan 16 '22 at 18:11
  • At the moment, I don't use any server (I just open HTML file). Because of the website purpose, it must work without server. Is there any other method to load external files placed in the subdirectory? – Eqsz Jan 16 '22 at 18:34
  • So this is a local HTML file accessing only other local files? – anut Jan 16 '22 at 18:38
  • Yes. I want to make a website that has a lot of files and I don't want to duplicate html file e.g. 40 times. Edit: I will place HTML files at server, but at the moment I make website on my local computer. It must has an access to local files, because it must work offline – Eqsz Jan 16 '22 at 19:09
  • In that case, on your local computer use the iframe solution given above; on a server, use XMLHttpRequest. – anut Jan 16 '22 at 20:06