0

I'm trying to create a simple off-line site (shared through Dropbox) that will serve as a knowledge base for my team. I'd like a way to pull the side bar site navigation links from one file since we'll have team members constantly updating it and don't want to have them updating them across dozens of pages.

I'm seeing the HTML include solution could work but I can't get it to work, I’m testing with a simple hyperlink in my navigation file:

<a href="new_pg.html">How to Add a New Page</a>

Any ideas what I'm doing wrong?

<!DOCTYPE html>
<html>
<script>
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;
    }
  }
};
</script>

<head>
<meta name="viewport" content="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">
<link href="css/styles.css" rel="stylesheet" type="text/css">
<script src="https://www.w3schools.com/lib/w3.js"></script>
</head>

<body>

<div class="sidenav">
<div class="nav-divider-line"></div>

<div w3-include-html="navigation.html"></div> 

<script>
includeHTML();
</script>


<div class="nav-divider-line"></div>
  
  
</div>

<div class="main">
Main Content
</div>


<script>
/* Loop through all dropdown buttons to toggle between hiding and showing its dropdown content - This allows the user to have multiple dropdowns without any conflict */
var dropdown = document.getElementsByClassName("dropdown-btn");
var i;

for (i = 0; i < dropdown.length; i++) {
  dropdown[i].addEventListener("click", function() {
  this.classList.toggle("active");
  var dropdownContent = this.nextElementSibling;
  if (dropdownContent.style.display === "block") {
  dropdownContent.style.display = "none";
  } else {
  dropdownContent.style.display = "block";
  }
  });
}
</script>


</body>
</html>
user1226431
  • 39
  • 1
  • 4
  • 8
  • What about server side includes (SSI)? Have you considered that? –  Apr 10 '20 at 21:39
  • 1
    Open the developer tools in your browser, look at the console, read the error messages. I'm better this is a duplicate of https://stackoverflow.com/questions/10752055/cross-origin-requests-are-only-supported-for-http-error-when-loading-a-local – Quentin Apr 10 '20 at 22:36
  • I'm seeing this, will this not work of the site is offline? Access to XMLHttpRequest at 'file:///C:/Users/adams/OneDrive/Desktop/OKB/Owl%20Nest/navigation.html' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https. – user1226431 Apr 11 '20 at 12:44

0 Answers0