kaizer1v · October 5, 2018 04:03
diff --git a/import-html.html b/import-html.html
 <!DOCTYPE html>
 <html>
 <head>
  <title>Import External HTML</title>
 </head>
 <body>

  <h1>Importing External HTML Files</h1>
  <p>View the code to see how to import another html</p>
  <hr>

  <!-- you should have another.html present in the same directory as this file. -->
  <div class='output' w3-include-html="another.html"></div>

 <script type="text/javascript">
  
  (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>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Import External HTML</title>
	</head>
	<body>

	<h1>Importing External HTML Files</h1>
	<p>View the code to see how to import another html</p>
	<hr>

	<!-- you should have another.html present in the same directory as this file. -->
	<div class='output' w3-include-html="another.html"></div>

	<script type="text/javascript">

	(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>
	</body>
	</html>