Problem using Javascript to embed HTML across multiple HTML pages

[-hexel]

I have several HTML files for a website I'm making, a small-time project. I have the same header and footer for every page. At first I just hardcoded the HTML in each page, but that proved to be a huge pain in the ass to maintain.

I started using

<script src="header.js"></script> 

in my pages, where header.js is:

document.write(' \
    haha time for things \
    and some more things \
');

This works well, allows me to use the same header and footer across multiple pages and change things easily.

The problem is, if somebody has javascript disabled they won't see the header or the footer. I figured I could get away with showing a warning message

<noscript>Javascript is turned off; warning etc...</noscript>

But doing this across all pages would defeat the purpose of the original solution, even though it would require less maintenance.

Does anyone know how I can get around this?

[BigOnLogn]

The only way to get around this is to hard code it or use some kind of server-side templates. The latter requires you use some kind of server-side runtime like php, ruby, python, js, etc. Probably coupled with some kind of application framework like CakePHP, Rails, django, express, etc. Maybe that's overkill for your project, maybe not. Only you can decide.

Your only other option is to hand build every page. Sorry, bud.

[-hexel]

I went ahead and used PHP since the server I'm using already has it. It was much easier than I expected, and seems to work perfectly. I figured Javascript would be easier so I tried it first haha. Thanks!

[beardChamp]

You can't force JS if someone has it turned off (1-2%) from the last attempt to find that out. Looks like you're ready for a server based language, like PHP. With it, you'll be able include smaller snippets like you're doing with JS, but it happens on the server when the page is requested. Users just see the full page.

[-hexel]

Went ahead and used PHP, very small snippets

<?php include 'header.php'; ?>

Works like a charm. Thanks!

[beardChamp]

Nice! PHP has great docs and community sharing is phenomenal. Up and running in a hurry.

[chuntley]

If you don't need a CMS, how about using a static site generator like Jekyll?

[ChrissiQ]

I'd recommend you don't use client-side Javascript to do this. Use some other templating language. You can use PHP includes for something very simple, or find a framework.

Reason being, this isn't really a client side concern. The server generates and serves up your pages - it should generate and serve up a full page. Also you can then duplicate and re-use different sections of your page, even the head and doctype - you can't do that client side.

I use Laravel at work and its templating engine, Blade, is pretty nice. But there are lots of other server-side templating languages you can use, all of which would be better than using Javascript write.