在html页⾯中引⼊另⼀个html页⾯
jquery在一个元素后追加标签我们在使⽤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 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

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。