Search code examples
jqueryhtmlnavigationfooterdry

How to use jQuery or HTML5 to duplicate header and footer on all pages?

I know with rails and django you can use templates to write a header and footer once as a separate file, and include it in all of your webpages. I was wondering, can something like this can be achieved with just jQuery or html5? if so, how?

<html>
    <head></head>
    <body>
        <navigation> include code from header.html here </navigation>
        ...
        some page specific content
        ...
        <footer>include code from footer.html here</footer>
    </body>
</html>
Solution

  • Ya, if you use jQuery's .load() function. I think it would look something like

    $('footer').load('/assets/myfooter.html');

    and that should do it.

    Documentation available here

    The only thing you can't do is get html from another domain because of the 'same origin policy', which I believe is to prevent CSRF attacks and/or session hijacking.