在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
赞 (0)

相关推荐