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

Question

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

Sha*_*aun 8 javascript

我正在尝试创建一个网站,我正在试图找出如何加载页面.

例如:

单击导航器"Home"然后单击屏幕底部它会加载一个页面女巫文本,例如"Hello Word!".

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

Answer 1

Jas*_*ges 15

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

在此示例中,将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>

Run Code Online (Sandbox Code Playgroud)

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

你好,world.html

<p>hello, world</p>

Run Code Online (Sandbox Code Playgroud)

@MuhammadUmer 以上演示了一个同步请求。 (2认同)
nvm 我刚刚重新意识到最后一个参数是“false”，它定义了请求是否是异步的。:D (2认同)

归档时间：	12 年，2 月前
查看次数：	46727 次
最近记录：	9 年，11 月前