如何将html文件添加到另一个html文件? [英] How to add a html file into another html file?

查看:129
本文介绍了如何将html文件添加到另一个html文件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

允许假装我有一个html文件 - main.html
&另一个html文件 content.html

lets pretend i've a html file - "main.html" & another html file "content.html"

我要在main上添加内容。我做了内容,其中

i want to add content on main. i made the content, where

 content's - Width = window.innerWidth || root.clientWidth || body.clientWidth;
    Height = window.innerHeight || root.clientHeight || body.clientHeight;

内容是绝对的。
和我不知道main的高度宽度。

content is absolute. and i don't know the height width of main.

在主体部分添加在body部分 -

in main i added in the body part -

&这发生了 -
在这里输入image description
这里can可以从内容&文本是从主要的..

& this happen - enter image description here here the can is from the content & texts are from the main..

问题是内容出现与它自己的滚动条..

the problem is content appears with its own scroll bar..

要执行...!?

推荐答案

要动态加载内容,可以使用 XMLHttpRequest()

To dynamically load content, you could make an AJAX call using XMLHttpRequest().

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

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('content.html');">Home</div>

        <div id="bottom"></div>
    </body>

</html>

当包含Home文本的div元素被点击时,它会设置div元素的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.

content.html

content.html

<p>Your content</p>

这篇关于如何将html文件添加到另一个html文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆