在html页面中引入另一个html页面

我们在使用html编写一个网站的时候,通常情况下头部和尾部是相同的,如果一个网站的每个页面都把这些代码写一遍,不仅浪费时间,还显得重复代码很多,所以此时把重复的页面单独摘出来,在用到的时候从外部直接引进去,就能节省很多时间,减少很多代码。

在这里,有好几种引入html文件的方式,不过每种都是有利有弊,需要根据需要自行选择

如果有些浏览器本地实现不了,那么放到服务器上面!(重要!!!)

注意:引入后主页面的Css样式不适用于被引入页面,比如在主页面设置

<style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
</style>

下面介绍几种实现方法:

一、import引入(<head>中引入文件,<script>中加载内容)

href链接引入的html文件,id可以看做页面引导,在script中用到

<head>
    <meta charset="utf-8" />
    <title>主页面</title>
    <!--import引入-->
    <link rel="import" href="top.html" id="page1"/>
    <link rel="import" href="fotter.html" id="page2"/>
</head>
<!--注意顺序-->
<!--import在头部引入,里面是啥就是啥-->
<script type="text/javascript">
    document.write(page1.import.body.innerHTML);
</script>
hello world!<!--本页面写入内容-->
<script type="text/javascript">
    document.write(page2.import.body.innerHTML);
</script>

二、通过JQuery的load()方法加载页面

相当于把引入的html中head和body标签中的数据拖出来,在外面包了一个你自己写的标签,比如说上面代码中的<div class="top"></div>

<!--注意顺序-->
<!--使用js引入,引入整个文档,但是没有html和body,相当于body里面的数据-->
<div class="top">top</div>
<div class="center">
    <p>你好,我在中间!</p>
</div>
<div class="footer">footer</div>
<script src="js/jq/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//在js中引入
$(document).ready(function () {
    $(.top).load(top.html);
    $(.footer).load(fotter.html);
});
</script>

三、object引入和iframe引入(带有滚动条,视情况使用)

<!--object引入,相当于把整个页面拉过来(在一个html中嵌套另一个html),包括title,meta,body,html等-->
<!--此处的高是嵌套进去的整个html的高,不包括边框,padding等-->
<object style="border:1px solid red" type="text/x-scriptlet" data="top.html" width="100%" height="200px"></object>

<!--iframe引入,同object方式一样,页面整个嵌套,默认高度为150,frameborder设置为1时边框宽度为2-->
<iframe marginwidth=0 marginheight=0 width="100%" height=200 src="top.html" frameborder="no" <!--scrolling="no"-->></iframe>

两中引入方式比较:

  • 相同点:
    1. 默认高度为150
    2. 引入后本页面html嵌套引入页面html,整个引入
  • 不同点:
    1. iframe引入使用scrolling="no"可以不让页面进行滚动,取消右侧滚动条
    2. iframe中 frameborder="no"可以修改为0或1,这里不是指宽度,可以理解为布尔型,当设为1时border宽度为2

在html页面中引入另一个html页面

上一篇:CSS 选择器优先级计算


下一篇:Nginx 容器连接 php rc-fpm 容器编译 php