Menu
I have several pages on a website that use the same header for each page. I was wondering if there was some way to simply reference a file with the html for the header sort of like in this pseudo code:
<!-- Main Page --> <body> <html_import_element src = "myheadertemplate.html"> <body> Then in a separate file:
<!-- my header template html --> <div> <h1>This is my header</h1> <div id = "navbar"> <div class = "Tab">Home</div> <div class = "Tab">Contact</div> </div> </div> This way I could write the header html once and just import it in each of my pages where I need it by writing one simple tag. Is this possible? Can I do this with XML?
595
Using document. importNode allows us to reuse instances of the same template content in multiple locations. That node is then appended into the document. body and rendered for the user.
You could do it in this fashion below.
<head> <link rel="import" href="myheadertemplate.html"> </head> where you could have your myheadertemplate.html
<div> <h1>This is my header</h1> <div id = "navbar"> <div class = "Tab">Home</div> <div class = "Tab">Contact</div> </div> </div> You can then use it with JS below
var content = document.querySelector('link[rel="import"]').import; So, after a long time I actually found a way to do this using AJAX. HTML Imports are a great solution, but the support across browsers is severely lacking as of 04/2017, so I came up with a better solution. Here's my source code:
function HTMLImporter() {} HTMLImporter.import = function (url) { var error, http_request, load, script; script = document.currentScript || document.scripts[document.scripts.length - 1]; load = function (event) { var attribute, index, index1, new_script, old_script, scripts, wrapper; wrapper = document.createElement("div"); wrapper.innerHTML = this.responseText; scripts = wrapper.getElementsByTagName("SCRIPT"); for (index = scripts.length - 1; index > -1; --index) { old_script = scripts[index]; new_script = document.createElement("script"); new_script.innerHTML = old_script.innerHTML; for (index1 = old_script.attributes.length - 1; index1 > -1; --index1) { attribute = old_script.attributes[index1]; new_script.setAttribute(attribute.name, attribute.value); } old_script.parentNode.replaceChild(new_script, old_script); } while (wrapper.firstChild) { script.parentNode.insertBefore( wrapper.removeChild(wrapper.firstChild), script ); } script.parentNode.removeChild(script); this.removeEventListener("error", error); this.removeEventListener("load", load); }; error = function (event) { this.removeEventListener("error", error); this.removeEventListener("load", load); alert("there was an error!"); }; http_request = new XMLHttpRequest(); http_request.addEventListener("error", error); http_request.addEventListener("load", load); http_request.open("GET", url); http_request.send(); }; Now when I want to import HTML into another document, all I have to do is add a script tag like this:
<script>HTMLImporter.import("my-template.html");</script> My function will actually replace the script tag used to call the import with the contents of my-template.html and it will execute any scripts found in the template. No special format is required for the template, just write the HTML you want to appear in your code.
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With