Injecting HTML into an HTML document without server side resources. (Offline)

Question

I have searched for various ways to inject simple html into a .html file from an external source that does not require server side activity. I have found some answers, but none of them seem to be "proper" or best practice. Consider this scenario. Let's say we're building a 20 page website. I want the footer to appear on all pages and be the same on all 20 pages. This is a static, generic HTML website. I would like to put the

<footer>
<whatever></whatever> <!-- Yes, I know whatever is not a valid tag. Just for demo. -->
</footer>

markup in say a footer.html (or whatever ext.) so that I can just add it to the bottom of the pages. Then when I need to make changes, I only have to change a single footer.html (or whatever...) file.

This is simple enough using jquery.

$('whatever').html('content');

Which works... but requires loading jquery. Not usually a problem if we're using Bootstrap or Foundation since they require it any ways and you can locally run the js and css files needed for both.

We can try this one...

<object name="whatever" type="text/html" data="whatever.html"></object>

And that kind of works. You have to add the stylesheet to the whatever.html file so that is not efficient.

document.write

Is a dead horse.

And just to be clear, let's pretend that putting this on a server is just not a possibility.

Does anybody out there have a solution for something simple like this that would be effective?

Thanks in advance to any suggestions!

server-side scripting/templating is generally the way to do this. There are client-side templating engines, however, look at icanhazjs.com, it's simple, but powerful enough for what you're doing — markasoftware
– markasoftware, Commented Nov 15, 2014 at 20:19

idoshamun · Accepted Answer · 2014-11-15 20:26:30Z

1

Take a look at a framework called AngularJS. It features a template engine among other features like model binding and writing reusable web controls (called directives).

I highly recommend it.

There is also a framework called Polymer which is only a template engine that can suits your needs.

answered Nov 15, 2014 at 20:26

idoshamun

1,1359 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Zackery Gianotti Over a year ago

Hi Shamun, Thanks for the reply. I am very familiar with AngularJS. It would be a viable option as much as jQuery (for THIS instance only). I suppose I should have been a little more clear. I was trying to avoid using a library. Angular is a very powerful tool! (and no, I am not even close to stating jQuery and AngularJS are similar.) - Thanks!

code_monk · Accepted Answer · 2014-11-15 20:25:58Z

0

this is possible in newer browsers using using HTML templates, although support is spotty:

<link rel="import" href="footer.html" />
<x-footer>
  <whatever></whatever>
</x-footer>

A good fallback for older browsers might be an frames or iframe.

Also note, if you want $.html() functionality without JQuery, this would work:

document.getElementsByTagName('whatever')[0].innerHTML = 'asdf';

answered Nov 15, 2014 at 20:25

code_monk

10.2k3 gold badges46 silver badges45 bronze badges

Collectives™ on Stack Overflow

Injecting HTML into an HTML document without server side resources. (Offline)

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related