All geek questions in one place

Is it possible to reuse HTML as a template on multiple pages?

I have several pages on a website that use the same title for each page. I was wondering if there is a way to just reference a file with html for a header type like this pseudocode:

<!-- 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>

That way I can write the html header once and just import it into each of my pages where I need it by writing one simple tag. Is it possible? Can I do this using XML?

+5
source share
3 answers

So, after a long time, I really found a way to do this using AJAX. Importing HTML is a great solution, but browser support is sorely lacking as of 04/2017, so I came up with a better solution. Here is 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 need to do is add a script tag as follows:

 <script>HTMLImporter.import("my-template.html");</script>

My function will actually replace the script tag used to invoke the import with the contents of my-template.html , and it will execute any scripts found in the template. The template does not require a special format, just write the HTML code that you want to display in your code.

+3
source

You can do it as follows.

 <head> <link rel="import" href="myheadertemplate.html"> </head>

where you can 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>

Then you can use it with js below

 var content = document.querySelector('link[rel="import"]').import;
+3
source

As far as I know, this is not possible. However, you can load the title as a web page in an iframe element. In past web pages, frame elements were created to load individual parts of the web page, this is not recommended, and legacy support in current browsers.

In most cases, this is done with server languages ​​such as php, as an example include("header.php"); .

0
source

Source: https://habr.com/ru/post/1246343/

More articles:


All Articles