如何使用JS加载另一个html文件

我正在尝试创建一个网站，并试图找出如何加载页面。如何使用JS加载另一个html文件

例如：

您点击导航“家”，那么它加载一个页面巫文说，例如在屏幕的底部的“Hello字！”。

有谁知道该怎么办？我很确定它涉及JavaScript。

来源

2013-09-21 Shaun

http://www.w3.org/wiki/HTML_links_-_lets_build_a_web#What_are_links.3F – Quentin

对我的理解不是很有帮助，对不起。 – Shaun

你在谈论单页面应用程序吗？您始终保持在同一页面上，但内容重新加载。 –

要动态加载内容，您可以使用XMLHttpRequest()进行AJAX调用。

在这个例子中，url被传递给loadPage()函数，其中返回加载的内容。

<!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>

当用户点击含有“家”的文本的div元素，它设置div元素的HTML与“自下而上”的标识内容在相对一样的“hello-world.html”文档中找到位置。

HELLO-world.html

<p>hello, world</p>

来源

2013-09-21 08:43:48

谢谢，但一个问题。那么多一页呢？会发生什么？ – Shaun

可以加载多个文档，通过重复调用此实现来替换或附加内容。 –

谢谢，老兄！你真棒。非常感谢你的帮助。 – Shaun

好吧，你正在寻找的是一个单页的应用程序。

有很多技术实现它，但并不那么容易。

这里是一个教程，我跟着做吧：http://andru.co/building-a-simple-single-page-application-using-angularjs

如果你想与SPA的走得更远，你一定会需要角模板。

来源

2013-09-21 08:45:50

如何使用JS加载另一个html文件

回答

相关问题