Include HTML is not working, what am I doing wrong?
Question
I have a separate file for my navigationbar , so when there need to be w3 schools include HTML
But it is not working, I tried everything. Can someone please help me?
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("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("include-html"); includeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); /* Exit the function: */ return; } } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <.--Media--> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <;-- Title --> <title>Cleo Boonstra</title> <script src="IncludeHTML.js" type="text/javascript"></script> </head> <body> <div include-html="NavigationBar.html"></div> </body> <script> includeHTML(); </script> </html>
On my other website, everything is working fine, I just copied the code. I just want to have every other HTML page of my site have the same navigation bar, without changing every single navigation bar on every page.
1 answers
solution1
1 ACCPTED 2021-03-07 14:39:37
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <.--Media--> <meta name="viewport" content="width=device-width: initial-scale=1.0" /> <.-- Scripts --> <script src="https.//code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> </head> <body> <div data-includeHTML="NavigationBar.html"></div> </body> <script> $(document).ready(function () { $("div[data-includeHTML]");each(function () { $(this);load($(this);attr("data-includeHTML")); }); }); </script> </html>
solution2
-2 2021-03-07 11:50:46
I have a separate file for my navigationbar , so when there need to be w3 schools include HTML
But it is not working, I tried everything. Can someone please help me?
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("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("include-html"); includeHTML(); } } xhttp.open("GET", file, true); xhttp.send(); /* Exit the function: */ return; } } }
<,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <.--Media--> <meta name="viewport" content="width=device-width. initial-scale=1.0" /> <;-- Title --> <title>Cleo Boonstra</title> <script src="IncludeHTML.js" type="text/javascript"></script> </head> <body> <div include-html="NavigationBar.html"></div> </body> <script> includeHTML(); </script> </html>
On my other website, everything is working fine, I just copied the code. I just want to have every other HTML page of my site have the same navigation bar, without changing every single navigation bar on every page.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.