How to Reuse HTML Code Across Several HTML Files

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

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.

How to reuse HTML across entire site

The simplest way I believe is to use jQuery.

See jQuery docs here

one.html:

<html> 
  <head> 
    <script src="jquery.js"></script> 
    <script> 
    $(function(){
      $("#header").load("two.html"); 
    });
    </script> 
  </head> 

  <body> 
     <div id="header"></div>
  </body> 
</html>

two.html:

<p> Put your header in here </p>

How to reuse the html code in every html page?

You could put your code in a different .html file and load it with .load() http://api.jquery.com/load/

$('#targetid').load('somewhere/a.html'); // loads the .html in the #targetid

Reuse html in different pages

Ok, so for me google tag manager is good. I can add custom html, and it goes onto all of my pages.

How to Reuse HTML Code Across Several HTML Files

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

How to reuse HTML across entire site

How to reuse the html code in every html page?

Reuse html in different pages

Related Topics

Leave a reply