How to load another html file using JS

Question

I'm trying to create a website, and I'm trying to figure out how to load a page.

For example:

You click on the navigator "Home" then a the bottom of the screen It loads a page witch text saying for example "Hello Word!".

Does anybody know what to do? I'm pretty sure It involves JavaScript.

http://www.w3.org/wiki/HTML_links_-_lets_build_a_web#What_are_links.3F — Quentin, Sep 21 '13 at 08:19
Are you talking about single page applications? You always stay on the same page, but the content is reloaded. — Deblaton Jean-Philippe, Sep 21 '13 at 08:41
Just like how this website works - habbosecrets.com. When you click "News" It loads text's and images. — Shaun, Sep 21 '13 at 08:43
I actually think this is a useful question + answer - so many answers on a similar topic jump straight in with a framework — JonnyRaa, Jun 13 '14 at 10:27

Jason Sturges · Accepted Answer · 2013-09-21T08:49:37.170

21

To dynamically load content, you could make an AJAX call using XMLHttpRequest().

In this example a url is passed to the loadPage() function, in which the loaded content is returned.

<!DOCTYPE html>
<html lang="en">
    <head>
        <script type="text/javascript">
            function loadPage(href)
            {
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("GET", href, false);
                xmlhttp.send();
                return xmlhttp.responseText;
            }
        </script>
    </head>

    <body>
        <div onClick="document.getElementById('bottom').innerHTML = 
                      loadPage('hello-world.html');">Home</div>

        <div id="bottom"></div>
    </body>

</html>

When the div element containing text of "Home" is clicked, it sets the html of div element with id of "bottom" to content found in the "hello-world.html" document at the same relative location.

hello-world.html

<p>hello, world</p>

edited Sep 21 '13 at 08:49

answered Sep 21 '13 at 08:43

Jason Sturges

15,855
14
59
80

Thanks, but a question in mind. What about more then 1 pages. What would happen? – Shaun Sep 21 '13 at 08:47
Multiple documents may be loaded, replacing or appending content by repeatedly calling this implementation. – Jason Sturges Sep 21 '13 at 08:52
@JasonSturges Why does it work though? I mean xmlhttp is async so when you return `xmlhttp.responseText` it should be empty because it should have run before the file has been downloaded, at least most of the times. But it does work why – Muhammad Umer Mar 08 '14 at 05:44
2

@MuhammadUmer Above demonstrates a synchronous request. – Jason Sturges Mar 08 '14 at 05:47
2

nvm i just rerealized that last parameter which is `false` defines whether request is going to be async or not. :D – Muhammad Umer Mar 08 '14 at 05:48
1

Syntax: `open(method,url,async)` – Jason Sturges Mar 08 '14 at 05:49
jsfiddle: http://jsfiddle.net/habla/rx3h8kp7/. I had to load jsfiddle into the div rather than a hello.html due to cross site security restrictions, but it demonstrates the principle. – Martin Capodici Aug 25 '14 at 03:11

score 0 · Answer 2 · answered Sep 21 '13 at 08:45

Ok, what you are looking for is a single page application.

There are plenty of technologies implementing it, but not that easy.

Here is a tutorial I followed for doing it : http://andru.co/building-a-simple-single-page-application-using-angularjs

If you want to go further with SPAs, you will certainly need angular templates.

score -2 · Answer 3 · answered Dec 25 '20 at 18:07

It's not necessary to use Ajax calls to load html. Use them when need the server to process data successfully before loading the page, if processing was successful.

If you don't have this concern, and you just want to load the html without data processing, a simple anchor tag will suffice:

 <a href="path/to/hello.html">click</a>

How to load another html file using JS

3 Answers3

Linked