including html files with javascript or jQuery?

Question

Is there a way to include an .html file into another page using javascript or jQuery, for example a header and a footer file, as these remain the same throughout whole project. The issue I can see with using jQuery is that it will probably be inside one of such files, hence not loaded before it is used, so I would assume javascript would be a better choice.

If such method exists will it cache loaded / included files as well?

Ideal solution would not require usage of containers to load data into, but instead include a file as is in place where include code is specified.

EDIT: As to some suggestions .load method can be used, but lets say I needed to load tag and its contents like css files, some javascript etc wich is used on whole pages, it seems incorrect to load it into a div, is there a way to achieve it? Is usage of $(document).load("header") a possible solution?

@Andy What if I want to include whole header so with
tag and all its contents? So I don't have to specify css files on every page, etc.. I can see issue with dynamic page titles with this approach, but for a sake of an example lets ignore it — Ilja, Mar 26 '14 at 18:17
@Ilja You can have only one `head` element per page, unless you want to use `iframe`s... Just load the stuff you need to the `head` of the actual page. — Teemu, Mar 26 '14 at 18:23
I would look at templating engines such as angular or doT.js, might make your job a little bit easier. Here is a site that might help you [find one](http://garann.github.io/template-chooser/) — Joe Komputer, Mar 26 '14 at 18:29

score 0 · Answer 1 · edited May 23 '17 at 10:31

0

You could do it like this:

$(function(){
  $("#header").load("header.html"); 
  $("#footer").load("footer.html"); 
});

HTML would be:

<html>
<head>
<title></title> 
</head>
<body>
<div id="header"></div>
<div id="footer"></div>
</body>
</html>

SOURCE

edited May 23 '17 at 10:31

Community

1
1

answered Mar 26 '14 at 18:18

APAD1

12,726
8
36
67

Yea, This is method used in comment left by Andy, but say if I wanted to load it with whole tag and its content, so css files etc, so I will not have to define them on every page? – Ilja Mar 26 '14 at 18:19
is it possible to achieve something like that through $(document).load("header.html") ? But in this case it will have to be a javascript method as we don't have jQUery loaded yet. – Ilja Mar 26 '14 at 18:23

score 0 · Accepted Answer · answered Mar 26 '14 at 18:50

You could have a document looking like this:

<!doctype html>
<html>
<head>
<script>

    ajax = new XMLHttpRequest();

    ajax.onreadystatechange = function() {
        if( ajax.readyState == 4 && ajax.status == 200 ) {
            document.getElementsByTagName("head")[0].innerHTML += ajax.responseText;
        }
    }

    ajax.open("GET", "head.html", true);
    ajax.send();

    ajax2 = new XMLHttpRequest();

    ajax2.onreadystatechange = function() {
        if( ajax2.readyState == 4 && ajax2.status == 200 ) {
            document.getElementsByTagName("body")[0].innerHTML = ajax2.responseText;
        }
    }

    ajax2.open("GET", "body.html", true);
    ajax2.send();

</script>
</head>
<body></body>
</html>

including html files with javascript or jQuery?

2 Answers2