Javascript import html is it possible?

Question

I have some html pages with the same footer. With javascript and only javascript could i import another html page inside it?

Answer 1

You can use ajax to return a whole HTML page. If you wanted to replace the whole page you could replace the body tag and all it's children currently on the page with the body tag returned from the ajax call.

If you wanted to just replace a section you'd have to write a server-side script to create that section, then use ajax as above but just replace an element rather than the whole page.

Answer 2

You could do a server side include, depending on your webserver. but the quickest way would probably be to create a JavaScript file that uses document.write or similar to output the html syntax. and then just include the created JavaScipt file the normal way. more info at: http://webdesign.about.com/od/ssi/a/aa052002a.htm

Answer 3

Along with what @Alex mentioned, jQuery has a method .load() that you can use to fetch a specific portion of a page (See Loading Page Fragments heading on that page). You specify the URL you want to retrieve along with a selector (so if you wanted only a specific <DIV>'s contents for instance).

Answer 4

As above, one method is to use jQuery load. I happened to be doing the exact same thing now, so will post a quick example.

Using jQuery:

$("#yourDiv").load('readHtmlFromHere.html #readMe');

And your readHtmlFromHere.html page would consist of:

<div><div id="readMe"><p>I'm some text</p></div></div>

Answer 5

You definitely could, but if all you're doing is templating I recommend you do this on the server.

Answer 6

Here's how you could use just javascript to add a footer to your page.

var ajax = new XMLHttpRequest();
ajax.open("GET", "footer.htm", false);
ajax.send();
document.body.innerHTML += ajax.responseText;