0

I have multiple HTML pages saved locally on my computer.

a.html, b.html, c.html, etc. etc.

I want a.html to be able to use the code that I have in the other HTML documents.

Here is my code:

function includeHTML() {
  var z, i, elmnt, file, xhttp;
  /*loop through a collection of all HTML elements:*/
  z = document.getElementsByTagName("*");
  for (i = 0; i < z.length; i++) {
    elmnt = z[i];
    /*search for elements with a certain atrribute:*/
    file = elmnt.getAttribute("w3-include-html");
    if (file) {
      /*make an HTTP request using the attribute value as the file     name:*/
      xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4) {
          if (this.status == 200) {elmnt.innerHTML =     this.responseText;}
          if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
          /*remove the attribute, and call this function once more:*/
          elmnt.removeAttribute("w3-include-html");
          includeHTML();
        }
      }
      xhttp.open("GET", file, true);
      xhttp.send();
      /*exit the function:*/
      return;
}}}

I have been using this code to combine multiple HTML documents together that i run them all locally on my computer. My code does not run online and does not use an external server. It used to work fine until I updated firefox. Now I get an error message:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at file:///home/josh/Desktop/test/test.html. (Reason: CORS request not http).

I did some research and apparently it has something to do with a security flaw in firefox. I found a work-around for it by changing: privacy_file_unique_origin to false in firefox's about:config page. But for me this is not ideal.

I am looking for a way to fix this issue without having to compromise the security of my computer.

How do i properly satisfy the cors request?

or is there a better way to combine multiple html documents?

I am trying to keep the code HTML and javascript.

Also please dumb down the answer as much as possible.

Josh Carew
  • 5
  • 2
  • The official way to include other HTML inside another HTML document entirely on the client-side or in a server-less context (without using AJAX hacks) is to use Web Components: see here: https://www.html5rocks.com/en/tutorials/webcomponents/imports/ – Dai Aug 31 '19 at 20:48
  • Possible duplicate of [CORS error on same domain?](https://stackoverflow.com/questions/19966707/cors-error-on-same-domain) – skyline3000 Aug 31 '19 at 20:49
  • Set up a localhost server. Lots of painless ways to do it. Or wrap your project into an electron app – charlietfl Aug 31 '19 at 21:08
  • I have no idea how to do that. My code is from the w3schools website for includeHTML. This used to work before the firefox update. I need a fix without having to change my code too much. – Josh Carew Sep 05 '19 at 02:31

0 Answers0