引入公共部分的html页面
一、问题描述
在日常开发中，我们会遇到这样的问题。比如说一个完整的网页，几乎每个页面都用到了相同的头部和底部，那么你是在每个页面都重复的写一遍一模一样的代码吗？这样会使代码冗余，并且没有工作效率。那么我们就可以考虑将相同代码提取出来，单独放到一个页面，然后那个页面需要，我们引入即可。下面我介绍几种方法。
二、方法一，使用jquery提供的load方法
接下来看代码
header页面
<div class="header">
<p>我是头部</p>
<p>我是头部</p>
<p>我是头部</p>
<p>我是头部</p>
<p>我是头部</p>
</div>
注意，这个页面是公共头部代码，一会儿我们要引入到index页面，这个页面书写的代码切记不要写那些head、body等等，你只需要写头部代码即可。原因是容一个页面不能有多个head、body等。同理，
footer页面
<div class="footer">
<p>我是尾部</p>
<p>我是尾部</p>
<p>我是尾部</p>
<p>我是尾部</p>
<p>我是尾部</p>
</div>
index页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.header {
width: 100%;
height: 300px;
background-color: #FF0000;
}
.footer {
width: 100%;
height: 300px;
background-color: #FF0000;
}
.main {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<header id="head"></header>
<div class="main">
<p>我是主体</p>
<p>我是主体</p>
<p>我是主体</p>
<p>我是主体</p>
<p>我是主体</p>
<p>我是主体</p>
<p>我是主体</p>
</div>
<footer id="foot"></footer>
<script src="./js/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
<!-- <script src="./js/include.js" type="text/javascript" charset="utf-8"></script> -->
<script type="text/javascript">
$("#head").load("header.html");
$("#foot").load("footer.html");
</script>
</body>
</html>
三、方法二，使用$.get()方法
同理header和footer页面和上面一模一样
看一下，用这种方法怎么写index页面。
index页面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.header {
width: 100%;
height: 300px;
background-color: #FF0000;
}
.footer {
width: 100%;
height: 300px;
background-color: #FF0000;
}
.main {
width: 100%;
height: 500px;
}
</style>
</head>
<body>
<header id="head"></header>
<div class="main">
<p>我是主体</p>
<p>我是主体</p>
<p>我是主体</p>
<p>我是主体</p>
<p>我是主体</p>
<p>我是主体</p>
<p>我是主体</p>
</div>
<footer id="foot"></footer>
<script src="./js/jquery-1.12.3.js" type="text/javascript" charset="utf-8"></script>
<script src="./js/include.js" type="text/javascript" charset="utf-8"></script>
<!-- <script type="text/javascript">
$("#head").load("header.html");
$("#foot").load("footer.html");
</script> -->
</body>
</html>
我们看到，我们引用了一个名叫include.js的文件，接下来看看这个js文件里的内容
$(function() {
$.get("./header.html",function(data){
$("#head").html(data);
})
$.get("./footer.html",function(data){
$("#foot").html(data);
})
})
这样就ok了。
网上还有其他方法，看着比较麻烦，就没有测试了，希望对你有用
版权声明：本文为qq_41880073原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。