Geek Answers Handbook

How to load another html file using JS

I am trying to create a website and I am trying to figure out how to load a page.

For example:

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

Does anyone know what to do? I am sure this is due to JavaScript.

+8
javascript
source share
2 answers

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

In this example, the URL is passed to the loadPage() function, which returns the loaded content.

 <!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 the text "Home" is clicked, it sets the html of the div element with the identifier "bottom" to the content found in the document "hello-world.html" in the same relative location.

Hi-world.html

 <p>hello, world</p>
+15
source share

Well, what you're looking for is a one-page app.

There are many technologies that implement it, but not so simple.

Here is the tutorial I completed for this: http://andru.co/building-a-simple-single-page-application-using-angularjs

If you want to continue working with SPA, you will definitely need angular templates.

0
source share

More articles:


All Articles