Last active 9 months ago

This is kinda like including a component in a JS framework using the "import" function, but with vanilla JavaScript.

Korbs's Avatar Korbs revised this gist 9 months ago. Go to revision

3 files changed, 25 insertions

component.html(file created)

@@ -0,0 +1 @@
1 + <p>Did it work?</p>

include.js(file created)

@@ -0,0 +1,22 @@
1 + function includeHTML() {
2 + var z, i, elmnt, file, xhttp;
3 + z = document.getElementsByTagName("*");
4 + for (i = 0; i < z.length; i++) {
5 + elmnt = z[i];
6 + file = elmnt.getAttribute("include-html");
7 + if (file) {
8 + xhttp = new XMLHttpRequest();
9 + xhttp.onreadystatechange = function() {
10 + if (this.readyState == 4) {
11 + if (this.status == 200) {elmnt.innerHTML = this.responseText;}
12 + if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
13 + elmnt.removeAttribute("include-html");
14 + includeHTML();
15 + }
16 + }
17 + xhttp.open("GET", file, true);
18 + xhttp.send();
19 + return;
20 + }
21 + }
22 + }

index.html(file created)

@@ -0,0 +1,2 @@
1 + <div include-html="./component.html"></div>
2 + <script>includeHTML()</script>
Newer Older