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

Question

我正在尝试创建一个网站，并且正在尝试弄清楚如何加载页面。

例如：

您单击导航器“主页”，然后单击屏幕底部它会加载一个页面女巫文本，例如“Hello Word！”。

有人知道该怎么做吗？ 我很确定它涉及 JavaScript。

Answer 1

要动态加载内容，您可以使用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>

当单击包含“Home”文本的 div 元素时，它将 id 为“bottom”的 div 元素的 html 设置为在相同相对位置的“hello-world.html”文档中找到的内容。

你好-world.html

<p>hello, world</p>

Answer 2

好的，您正在寻找的是单页应用程序。

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

这是我遵循的教程： http : //andru.co/building-a-simple-single-page-application-using-angularjs

如果您想进一步使用 SPA，您肯定需要 Angular 模板。

Answer 3

没有必要使用 Ajax 调用来加载 html。 如果处理成功，需要服务器在加载页面之前成功处理数据时使用它们。

如果你没有这个顾虑，只想加载 html 而不进行数据处理，一个简单的锚标签就足够了：

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

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

问题描述

3 个解决方案

解决方案1
19 已采纳 2013-09-21 08:43:48

解决方案2
0 2013-09-21 08:45:50

解决方案3
-1 2020-12-25 18:07:36

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

问题描述

3 个解决方案

解决方案1 19 已采纳 2013-09-21 08:43:48

解决方案2 0 2013-09-21 08:45:50

解决方案3 -1 2020-12-25 18:07:36

解决方案1
19 已采纳 2013-09-21 08:43:48

解决方案2
0 2013-09-21 08:45:50

解决方案3
-1 2020-12-25 18:07:36