Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to load another html file using JS

Tags:

javascript

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.

like image 361
Shaun Avatar asked Sep 21 '13 08:09

Shaun


1 Answers

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>
like image 167
Jason Sturges Avatar answered Nov 11 '22 14:11

Jason Sturges