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

Question

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

javascript

10

我正在尝试创建一个网站，想知道如何加载页面。

例如:

您单击导航器上的“主页”，然后屏幕底部加载一个页面，其中显示文本，例如“Hello Word!”

有人知道该怎么做吗？我相信这涉及JavaScript。

- Shaun

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

对于我的理解并不是很有帮助，抱歉。 - Shaun

你是在谈论单页应用程序吗？你总是停留在同一页上，但内容会重新加载。 - Deblaton Jean-Philippe

就像这个网站habbosecrets.com一样。当你点击“新闻”时，它会加载文本和图片。 - Shaun

2

我认为这是一个有用的问题和答案 - 在类似主题的许多答案中，直接跳入框架。 - JonnyRaa

3个回答

0

好的，你需要的是一个单页应用程序。

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

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

如果你想进一步了解单页应用程序，你肯定需要使用Angular模板。

- Deblaton Jean-Philippe

-1

加载HTML时不一定需要使用Ajax调用。只有在需要服务器在成功处理数据后才能加载页面时，才需要使用它们。

如果您没有这方面的顾虑，只是想加载HTML而无需进行数据处理，则简单的锚点标签就足够了：

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

- Eazicoding

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jason Sturges · Accepted Answer

为了动态加载内容，你可以使用 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”文档中的内容。

hello-world.html

<p>hello, world</p>