How to load another html file using JS

后端未结

关注

 2  410

忘了有多久

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

相关标签:

2条回答

小鲜肉

2020-12-19 05:31

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>

0 讨论(0)

遇见更好的自我

2020-12-19 05:41

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...